I'm basically a phone developer and have no knowledge about web programming. What I'm trying to do is loading an image with any width and height in a browser control of my mobile app with a fixed width (say 400px) and a growing height. that image should fill the browser control completely without any free spaces.
<script type="text/javascript">
window.onload = function () {
var elem = document.getElementById('content');
window.external.Notify(elem.scrollHeight + '');
}
</script>
<div id="content">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<img src="http://www.reactiongifs.com/r/iwsyih.gif" />
</div>
this, doesn't fill the page with image, and also its width is not 400. thanks.
you can some styling to your code :
<style>
image{
position: absolute;
height :100%
width: 100%;
}
</style>
I am not sure what you mean by browser control.
One way is to use and size a div element via CSS and set its background image via CSS property.
<div style=' /* more CSS */ background-image:url("foo.png");'></div>
For example see http://www.w3schools.com/css/css_background.asp
I'm guessing that by browser control you mean the window area. If so, you can set a background-image for the <body> tag and make it fill the whole area thanks to background-size: cover:
body {
background: url(http://www.reactiongifs.com/r/iwsyih.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* IE8 and older hack */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
This is a new CSS3 feature, so you have to use browser specific prefixes (webkit, moz and o). The solution doesn't work in IE8 and older, so you need to add the filter hack (see the code).
HERE'S the full article about this method.
As the article explains, it can be unsafe to use the mentioned filter methods for IE due to possible scrollbar, and link issues. If you'll experience the problem you can resolve it by applying the background not to <body> tag but to some <div> which you will spread for 100% width and height. In that case you must remember to add 100% width and height also for html and body:
html, body {
width: 100%;
height: 100%;
}
#bg-image {
width: 100%;
height: 100%;
/* additional styles to let the div serve as a background, not spoiling the layout */
position: absolute;
z-index: -1;
background: url(http://www.reactiongifs.com/r/iwsyih.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* IE8 and older hack */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
Example HTML:
<html>
<head>
(...)
</head>
<body>
<div id="bg-image"></div>
(...)
</body>
</html>
I believe that what you are trying to do is more suited to a CSS solution... below I have added the code that should solve your problem. Keep in mind that setting a fixed width but changing height is not the best idea as the image can become distorted. Regardless, I have included the css for setting a background image to cover your content container. Here is the full code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<style>
/* # represents an id */
#content{
max-width: 400px; /* this is your restricted width that you are desiring */
width: 100%; /* if you want the image to cover the whole screen regardless of the device */
height: 100%;
background: url(http://www.reactiongifs.com/r/iwsyih.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<div id="content">
<img src="http://www.reactiongifs.com/r/iwsyih.gif" />
</div>
<script type="text/javascript">
window.onload = function () {
var elem =
document.getElementById('content');
window.external.Notify(elem.scrollHeight + '');
}
</script>
<body>
</html>
As you might have noticed I added and tags to your code, without these your code will not behave as expected. You should be able to copy and past this code. Hope it helps :).
Related
1st of all this is about the mobile version of a site
My goal is to take an image clip it in it's center and make it free for the user to move left and right as he pleases
I believe I am the wrong foot and clip value shouldn't be used don't take my code and try to fix it may be completely wrong
I have an idea to hide the image left and right somehow but I don't know how to implement it
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.center-cropped {
width: 500px;
height: 800px;
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;
}
.center-cropped img {
min-height: 100%;
min-width: 100%;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* modern browsers */
opacity: 0;
}
</style>
</head>
<body>
<script>
</script>
<div class="center-cropped" style="background-image: url('office.gif');">
<img src="http://placehold.it/400x400" />
</div>
</body>
</html>
I have a problem I need to put a background image to the body of my page but that this is responsive and suits any size .. this I should do only with css or also javascript, could give an example please
For the HTML:
<body class="background">
<!-- Content goes here -->
</body>
For the CSS:
.background {
background-image: url(image.png);
background-size: cover;
position: fixed;
}
Tell me how it goes!
For the CSS
.body {
background-image: url('myImg.jpeg');
background-position:center top; // you can change this as you like.
background-repeat:no-repeat;
-moz-background-size:cover;
background-size:cover;
height: 100%;
width:100%;
}
Add -moz-background-size for Firefox Browser.
I am new to HTML/CSS and I am designing a basic web-page. I added a Background Image and showing information on it. But, when I scroll the webpage, the image remains fixed on the starting and when I scroll down, it doesn't show any background. I have attached the image below describing my problem.
This is my page on opening HTML file
And this is my page on scrolling down
This is my code:
<!DOCTYPE html>
<html>
<head>
<title>
CSS | HOME
</title>
</head>
<style>
h2
{
color: yellow;
font-family: courier;
}
body
{
position: absolute;
top = 0;
bottom = 0;
left = 0;
right = 0;
background-image:url("tomb_raider_definitive_edition.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.noselect /* Disable Copy Text */
{
-moz-user-select:none; /* Mozila FireFox */
-ms-user-select: none; /* Internet Explorer */
-webkit-user-select: none; /* Chrome, Safari, and Opera */
}
</style>
<body>
<span style="color:red"></span>
<h2 class="noselect; h2">TOMB_RIDER (2013)</h3>
<pre class="noselect">
<!-- Some Info here -->
</pre>
<p class="noselect" style="font-family: verdana;"><strong>TOMB_RIDER</strong></p>
<a href="https://upload.wikimedia.org/wikipedia/en/f/f1/TombRaider2013.jpg">
<img src="TombRaider2013.jpg">
</a>
<table border="1px"; style="border-style:solid;" class="noselect">
<!-- Table code-->
</table>
<h2 class="noselect">Requerment !</h2>
</body>
</html>
What I want is that the background image should remain fixed and only the content should be scrolled.
I also tried position: relative; and position: fixed;, but none of them is working. I also searched on SO and W3Schools before asking it, but I couldn't find solution to my problem.
Any kind of help would be appreciated. Thank you.
According to W3schools
background-attachment: scroll|fixed|local|initial|inherit;
Check this property this will solve your problem..
Here the value fixed is used to fix the background with regard to the viewport.
You can edit your code like this-
body
{
background-attachment: fixed;
position: absolute;
top = 0;
bottom = 0;
left = 0;
right = 0;
background-image:url("tomb_raider_definitive_edition.jpg");
background-repeat: no-repeat;
background-size: cover;
}
Hope this helps.
Give this a try
body
{
position: absolute;
top = 0;
bottom = 0;
left = 0;
right = 0;
background-image:url("tomb_raider_definitive_edition.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
Try using background-attachment: fixed; as this will attach the background image to the viewport.
I am using Vide to play a video in the background.
Here is the playing div tag.
<div style="width: 1000px; height: 500px;"
data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%">
</div>
when i change the style to
width: 100%; height: 100%;
The video disappears from the page. I want that video covers all page and I can scroll down.
Why does it happen?
How can I fix it?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Body background example</title>
<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body data-vide-bg="video/ocean">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../libs/jquery/dist/jquery.min.js"><\/script>')</script>
<script src="../src/jquery.vide.js"></script>
</body>
</html>
This is fine just put scroll bar or use some jquery for scroll purpose.
if you want to cover all with the div and adjusted depending on the size of the screen, this is the code (Important, this is directive to the div):
style="
position: absolute;
z-index: -1;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
-webkit-background-size: cover;
background-size: cover;
background-image: none;
background-position: 50% 50%;
background-repeat: no-repeat no-repeat;"
if you want in the body, in the folder examples/body-bg.html is the examples for apply to the body only: https://github.com/VodkaBears/Vide/tree/master/examples
You are using the wrong units of measurement. If you pull the image in via CSS image-background then you can set the image-background-size to the contain property. It will insure that the video completely fits into it container (body, div, span, etc.).
body{
background-image:url(''your-video.mp4');
background-repeat:no-repeat;
image-background-size: contain;
}
Source: w3schools CSS3 background-size Property
You could also try using the height and width but use the vh and vw metrics. It sets the height and width based on the view ports dimensions.
Source: CSS Units
I am trying to apply some CSS to a web page background but am a little unsure how to do so. I have a script that when someone clicks a button, it changes the background image. However, the images are not to scale and are not sized right. I want to add some style to the image but dont know where to do so. I am trying to add :
background:url(Pic/jungle.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Into each image. So when someone does click a button, its a single image thats fits the screen nicely. Does anyone have any sugguestions about where I might go about adding these styles to the background image? Thank you for your time and help.
<!DOCTYPE html>
<html>
<style>
body
{
background-image:url(Pic/jungle.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<body>
<button class="color" style="background-image: url('Pic/changebackground.png'); width:60px; height: 50px;background-repeat:no-repeat;background-color: transparent;border:none;"></button>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
var rotate = 0;
var colors = ["url('Pic/hi.jpg')", "url('Pic/jungle.jpg')"];
$('body').on("click", function () {
$(this).css({
'background-image': colors[rotate]
});
rotate++;
if (rotate >= 2) {
rotate = 0;
}
});
});
</script>
</body>
</html>
You are overriding the background-property completely by using $(this).css('background'). Try using background-image instead.