I have the following css background:#e0e0e0 url(images/bodybg.gif) top center repeat-y;
What I want to do is span the bodybg.gif to 100% but i'm not sure how to do that without losing the effect of that tag.
Thanks!
Change it to:
background:#e0e0e0 url(images/bodybg.gif) top center repeat-y 100%;
The number(s) or label for background size can be placed after the background repeat value in a compound background style. You may also want to change the background size to cover depending on your needs.
More from MDN
The background CSS property is a shorthand for setting the individual
background values in a single place in the style sheet. background can
be used to set the values for one or more of: background-clip,
background-color, background-image, background-origin,
background-position, background-repeat, background-size, and
background-attachment.
And on background-size
The background-size CSS property specifies the size of the background
images. The size of the image can be fully constrained or only
partially in order to preserve its intrinsic ratio.
[...]
cover: This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions
are greater than or equal to the corresponding dimensions of the
background positioning area.
You can add background-size:cover; property
background: #e0e0e0 url(images/bodybg.gif) no-repeat center fixed;
-webkit-background-size: cover; /* for Chrome et Safari */
-moz-background-size: cover; /* for Firefox */
-o-background-size: cover; /* for Opera */
background-size: cover;
Related
What does this line mean in CSS ?
#ffffff url(https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg) no-repeat center center / cover
I am trying to figure it out. In W3S it says the following about the structure but I can't seem to see what the '/' and how do other attributes match this structure.
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
This line
background: #ffffff url(...) no-repeat center center / cover;
Actually is the shorthand version for:
background-color: #ffffff;
background-image: url(...);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
The / is valid CSS, see the formal syntax on MDN.
Well if you split it up, you'll see that it's reading the following in order:
background-color | background-image | background-repeat | background-position | background-size
According to the documentation - cover is a special value for scaling images:
The cover value specifies that the background image should be sized so that it is as
small as possible while ensuring that both dimensions are greater than
or equal to the corresponding size of the container.
Here's their sample fiddle
It means a white background is covered by this image; https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg, it is centrally aligned and will stretch to fit the width or height, whichever is largest, whilst mainting its proportions.
I have got so far on the background of my new website and now i am stuck, the background image goes less than 100% height if you shrink the browser window.
I want it to stay full size and if you shrink it, I don't want the height to go any less than 100% (showing white)
Code here http://www.bestlincs.co.uk/new/
you can use below code:
html or .classname {
background: url(ImageUrlhere) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use:
body {margin: 0; padding: 0}
and set the background-size property to cover: http://www.w3schools.com/cssref/css3_pr_background-size.asp
In your code you have not defined a height to the image give it a height 100% and it works i tried it in my browser and works fine
The solution depends on your needs - one way would be to specify a min-width and min-height attributes in css instead of pure width. As it will scale to whatever size it needs, then position it fixed to the top left corner (mind you, any "overflow" on the right will be cut off).
Source:
http://css-tricks.com/perfect-full-page-background-image/
A detailed explanation of your problem:
If you set an image to 100% width of its container and do not specify a height, it will always be stretched until it fills out the container, while the height is scaled to keep the image's aspect ratio.
E.g: Take an image that is 200px x 100px large, put it into a 300px wide container with it's width set to 100%. It will be scaled by a factor of 300/200 = 1.5 along both dimension, resulting in an image sized: 300px x 150px.
What will happen, if your image has a different aspect ratio than the user's screen? It will simply stretch to full width, then leave the rest blank. Setting a height as well would introduce even more problems, as your image would get distorted.
HTML:
body {
margin:0;
background: url(image.gif) no-repeat;
padding: 0;
}
Then the background size will be 100%
This is my page http://inogroup.it/preload/index.htm
Width of image boxes is responsive
How to set the height to be responsive too? Like 50% of the screen?
If I do this change:
.pattern{
background-size: contain;
margin-bottom:25px;
width:100%;
height:50%;
}
it's not working
Thank you very much!
background-size: needs to come AFTER background: I don't know if this is true of all browsers, but it's certainly a feature of Chrome that can drive you crazy.
This might be a bit late but in some cases it's necessary to add background-attachment: fixed; to get background-size: cover; working.
You need to use background-image property to define background image.
So this won't work
<img class="image" style="background: url(image.jpg);" />
.image { background-size: cover; }
because background is the shorthand code and takes default values for all omitted parameters.
But if you do this
<img class="image" style="background-image: url(image.jpg);" />
.image { background-size: cover; }
This wil solve the problem.
The height of the div can be set using css height property, or (by default) by the height of it's children elements. As the images are being set as background images the div is unable to determine the height it should be from that, and there is no pure css method of adjusting the height of a div to fit the dimensions of a background image. What you can do, is set the background images to be positioned in the centre of the div and have the background size as cover:
.pattern-container .pattern {
background-size: cover;
background-position: 50% 50%;
<!-- other rules here -->
}
Positioning the background images as 50% 50% vertically and horizontally centres it in the containing div regardless of the dimensions of the div. That said, the image itself may crop at the edges if the aspect ratio of the div is less than the aspect ratio of the image (e.g. if the div is 30px wide and 10px high, and the image is 40px wide and 10px high, then the image is going to lose 5px from both sides).
You can use ;
background: url('/path');
background-size: cover;
//in the style sheets
In some cases, there may be empty space in the edges of your image itself (e.g., an icon that is surrounded by 16px of blank white space on each side) making it seem like background-size: cover; is not working when it actually is.
Just a reminder to double-check your source image :)
The image boxes are responsive, but this does not mean that the corresponding images are. For a more fluid and dynamic structure, I recommend using a framework that does the work for you, like Bootstrap.
In the latest version of Bootstrap you could use the following code to make a responsive image (both in width and height):
<img src="images/my_img" class="img-responsive" />
In order for this to work, you will need to download the latest version of Bootstrap from their website (http://getbootstrap.com/) and reference in your code.
I was wondering what the easiest and simplest method was to make (3) different clickable areas on a jpg image used as website. But, I'm using the following code to make it dynamically resize on window dimension change
(css)
background: url('backgroundIMG.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
and so I need a solution that would move the clickable areas move/reposition accordingly, because otherwise I found an easy way to make clickable areas using Edge Animate, but I fear this only works for static backgrounds.
Thanks!
I'd make 3 divs with height and width as needed, but that have no content. Then I'd make each div do whatever I needed.
It's important to add that the height and width will be in '%' and not in 'px'. That makes them move according to the background image.
I used a background image with dimension 1120 X 714 pixels. The length and width ratio should be proportional w/ it's dimension so that the image will not look distorted.
The webpage that will use the background-image have a fixed width of 1024px. In my css, I have below:
body{
background: black url("background.jpg") no-repeat fixed center;
background-size: 1120px 100%;
}
The css above will make the length of the background-image 100%. Depending on the resolution or the browser dimension, the background-image will get distorted.
Width is not a problem here.
What are other approach for this having a fixed dimension of background image?
Should I use background-size: 1120px 714px;?
When you set the background-size: the first value is the width and the second one is the height.
So if you want to make the length of the image 100% then write:
background-size: 100% 714px;
I presume 714px is the height of the image...
You need not specify the background size at all. The code below should be enough.
body{
background: black url("background.jpg") no-repeat center center;
background-attachment: fixed;
}