<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body style="background-color:lightblue;">
</body>
</html>
External css file:
body
{
background-image:url("pass.jpeg"),url("skin.jfif");
background-repeat: no-repeat,no-repeat;
/* any background image will start from the top left corner of the element targeted*/
background-size: 100% 50%, 100% 100%;
/* setting the width and height of both the images */
}
will the inline css over ride external css or external css will over ride ?
but i know that inline css specificity is higher.
Specifity does it even come here as both properties are different and element is same i.e body.
Why the output is like this? what is going on?
How the whole process works?
Is the html parser first injects background color light blue to the whole body then embeds two back images.
Why the images are up there like a thin line
well, there is a hierarchy level on style, have always in mind that the closest style of the tag will be always the first to take effect then the others will always be in the back of it.
As i can see, the problem in your code that are making your images stretch is this line with: background-size: 100% 50%, 100% 100%; - The problem here is that you're using percentage as a metric, you should use other metric numbers as px, em, rem, vw like width: 50px height: 50px;
You was trying to set up the width and height of the images right? I don't think you can set up it individually but only the width and height of the background. If you can cut or re-size the img on paint, then use it again. If you still want to re-size the background, i advice you to create a inside your tag, and try to put the images as background of this div, then use background-size: 150px 100px; for example, the background-size on this div.
Inline styles (style="") override internal stylesheets (<style>) which override external stylesheets (<link>). This is the cascading effect of CSS, which stands for Cascading StyleSheets. You can use !important after a style rule to give it more priority:
body {
background-image:url("pass.jpeg"),url("skin.jfif")!important;
background-repeat: no-repeat,no-repeat;
/* any background image will start from the top left corner of the element targeted*/
background-size: 100% 50%, 100% 100%;
/* setting the width and height of both the images */
}
Related
* {
margin:0;
padding:0;
}
body {
background-image: url(https://media.architecturaldigest.com/photos/5da74823d599ec0008227ea8/16:9/w_2560%2Cc_limit/GettyImages-946087016.jpg);
background-size: contain;
}
<html>
<body>
</body>
</html>
In this example, the background-image is not shown when background-size is set to 'contain'.
Note that, I know that if I set the padding of the body to be 10px or 20px, the background-image will be shown the size of the padding. I don't understand why?
* {
margin:0;
padding:0;
}
body {
background-image: url(https://media.architecturaldigest.com/photos/5da74823d599ec0008227ea8/16:9/w_2560%2Cc_limit/GettyImages-946087016.jpg);
background-size: cover;
}
<html>
<body>
</body>
</html>
In this example, the background-size is set to 'cover', and the entire image is displayed. Why does 'contain' not work if height is not defined, why does it work with padding, and why does it work for 'cover' despite height not being defined?
The reason is that in both cases the html element (and the body) element has height equal to 0 and a width equal to screen width.
Contain always consider the smallest dimension while cover always consider the biggest one.
let's take an example with a classic element to see what is happening:
.box {
height: 5px;
border: 1px solid;
margin:5px; background:url(https://media.architecturaldigest.com/photos/5da74823d599ec0008227ea8/16:9/w_2560%2Cc_limit/GettyImages-946087016.jpg) center no-repeat
}
<div class="box" style="background-size:contain"></div>
<div class="box" style="background-size:cover"></div>
I took a div with a small height and you can clearly see how the image is small when using contain but with cover the image will cover all the width. Now imagine that we make the height equal to 0. In both cases, we will logically see nothing but imagine how the background will behaves. With contain the size will be 0 but not with cover and all the trick is here.
In addition to the above observation, you have the background propagation trick:
For documents whose root element is an HTML HTML element or an XHTML html element [HTML]: if the computed value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the computed values of the background properties from that element’s first HTML BODY or XHTML body child element. The used values of that BODY element’s background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background for the BODY element rather than the HTML element.
All the trick lies on the "are treated as if they were specified on the root element". In other words, you background is applied to html (0 height and full width) and in this case the size of the background is 0 so we see nothing after the propagation but in the case of cover the size of the background is different from 0 and we see something.
If you take your example with cover and you apply 0 to the width you will see nothing:
body {
background-image: url(https://media.architecturaldigest.com/photos/5da74823d599ec0008227ea8/16:9/w_2560%2Cc_limit/GettyImages-946087016.jpg);
background-size: cover;
margin:0;
}
html {
width: 0px;
}
Increase the width a little and the background will start showing
body {
background-image: url(https://media.architecturaldigest.com/photos/5da74823d599ec0008227ea8/16:9/w_2560%2Cc_limit/GettyImages-946087016.jpg);
background-size: cover;
margin: 0;
}
html {
width: 5px;
}
A repeated pattern of small images having width equal to 5px. Same logic with contain if you increase the height of your first example
body {
background-image: url(https://media.architecturaldigest.com/photos/5da74823d599ec0008227ea8/16:9/w_2560%2Cc_limit/GettyImages-946087016.jpg);
background-size: contain;
margin: 0;
}
html {
height: 5px;
}
Related question to see a similar behavior but with gradients: How to remove the stripes that appears when using linear gradient property
Your padding question becomes trivial now. Adding padding will increase the height of the html element and the size of your image will be different from 0
The simplest answer I can give you is this.
background-size : contain; scales an image in such a way that it fits the parent container.
html and body tag have a height of 0px, so picture cant fit in.
You need to make a div with a width and height properties, this way background-size : contain; will work. :)
On the other hand, background-size : cover; doesn't have that issue, it will always cover the whole parent element (even the body/html tag).
Hope this helped.
An image that I'm using for the background of a website is getting positioned to just the center of the page.
The screenshot for what I'm explaining is as follows:
Why is the black space on the right and left of the image present?
The CSS for the following is:
body {
background: black url('http://unsplash.s3.amazonaws.com/batch%209/johnny-lam-connect.jpg')no-repeat 50% 100%;
}
It would appear that your background image isn't big enough to cover the space of your window size. As a result, the black background color you're also providing is being seen on the areas where your image can't cover.
I'd be tempted to try the following:
body {
background-image: url('http://unsplash.s3.amazonaws.com/batch%209/johnny-lam-connect.jpg');
background-position: center;
background-size: cover;
}
This will ensure your background image covers the body of your HTML. More info can be found here.
First of all, it is black because in your CSS you specify black as the background colour. But im assuming you mean why is there any blank space at all...
In which case, the simple answer is the size of your image does not match the size of the window. More specifically, the resolution and therefore width to height ratio is not the same as the window. So the browser will center the image as per your css instructions and fill the rest of the space with your solid base colour (black).
You basically have 3 options here.
You find a background colour that is appropriate for the blank space to fit in with your design (a lot of people add a border or fade the image edges to transparent so it looks purposeful).
You use an image which is repeatable (this is the most common step as its usually advisable to use a very small repeatable image rather than a single large image. As an example, you might have a 2000px image gradient going from one colour to another that can be repeated (aka tiled) horizontally.
Use the background-size: cover property to fore the background image to fully cover your body tag. This property can be set to a number of options, but each one comes with its own caveats (i.e. weird stretching issues or cropping important parts on certain screens). So you need to google for the valid values and test each one. You will also have to download a shim/polyfill for this property to support old browsers (IE?).
It looks like the body is used to center the page. As the body is just as wide as the content, thats where the image ends. The root html element gets the background-color from the body, but not the image.
As a solution, you should consider adding a wrapping div to center the page, while setting the background on the body.
Example HTML
<html>
<body>
<div class="page"> ... </div>
</body>
</html>
Example CSS
html, body {
margin: 0;
padding: 0;
}
body {
background: black url(...) no-repeat center top;
}
.page {
width: 90%;
margin: 0 auto;
}
In your css use following property:
body {
background-size:cover;
}
or
body {
background-size:100%(for width) 100%(for height);
}
Hope it will help.
I need to set the image height everytime I'm using background: url('images/something.jpg')[..];
Fe.
HTML:
<div class="someImage"></div>
CSS:
.someImage {
background: url('images/something.jpg') no-repeat top;
}
The above example should work... but image won't display until I add an image height attribute to the CSS style class:
.someImage {
background: url('images/something.jpg') no-repeat top;
height: 25px;
}
And then my image appear on the website...
Why does it happend?
Because without content, a div has no height, background image or not.
Since your div is empty it has no height..
The image you use is applied as a background, so it does not affect the size.. it just fits whatever space is available at the div.
When you explicitly set the height, you create room for the image to appear..
My code:
background:url(images/menu_edu.jpg) no-repeat;
But only half of the image is getting displayed.
The element which has the background needs to be the size of the image.
i.e. flower.jpg = 255px x 55px
<div class="flower">
Some text
</div>
.flower {
background: url(flower.jpg) no-repeat;
width: 255px;
height: 55px;
}
The size of the element cannot be set to the dimensions of the image if you're using a background. You could use javascript to calculate the dimensions though.
Or if you need to repeat the image, you can use repeat, repeat-x or repeat-y on the background tag instead.
If you just want to display an image, the IMG-tag is much more useful and effective... (and it could be set to width(/&)height = 100%).
If you want to display your image in full size, no need to use CSS for this
Dont give height and width attribute to the <img> tag like
<img src="this.jpg" /> it will display in full size
But if you want your <div> to show its background in full size, then is no other option than assigning the exact image dimensions
You are not showing enough code, but if the background image is in the body element, it is probably not stretching across the whole viewport.
Try
html, body { min-height: 100% }
I have the following CSS code:
.yellow {
background-image: url('/images/yellowlight.png');
background-repeat: no-repeat;
height:100%;
width:100%;
}
and the following HTML code:
<div class="yellow"> </div>
However, the div on the page does not have the image. You can see this by clicking on the blue "Logs Status" button (in the tab box) at http://cl58logs.co.cc/.
What's wrong with the CSS?
Your div is not large enough. Background images will not scale. If you want the image to scale, you'll have to use the img tag.
Also, note that height: 100% doesn't work in CSS, except for table cells.
The problem is that the div with the background image has almost no content (apart from a space character).
If you force the div to have a larger height, for example, by changing the CSS to this:
.yellow {
background-image: url('/images/yellowlight.png');
background-repeat: no-repeat;
min-height:600px;
width:100%;
}
then your image appears
The height (437px) and width (700px) of the image is greater than the dimensions of your div. Set an appropriate height and width for your div to allow for the image to be shown.
Install Firebug to better inspect your HTML elements when you come across issues like this.
Since you're setting height and width to 100%, the amount of the image you see will depend on the divs containing the yellow class. Try changing the width and height on the status class and you will actually see your the bg image on yellow.