Menu
I am very new to css so this maybe a simple answer. I have 2 scenarios and 1 works the other doesn't. I hope someone can help me out.
WORKS:
<head>
<style type="text/css">
body {
background-image:url('views/default/images/home.jpg');
;}
</style>
</head>
DOESN'T WORK:
<head>
<link rel="stylesheet" type="text/css" href="views/default/home_style.css" />
</head>
In home_style.css>
body{
background-image:url('views/default/images/home.jpg');
margin-top: 0px !important;
padding-top: 0px !important;
}
350
By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally. Tip: The background of an element is the total size of the element, including padding and border (but not the margin). Tip: Always set a background-color to be used if the image is unavailable.
There are several possible reasons why your images are not showing up on your pages as expected: The image file is not located in the same location that is specified in your IMG tag. The image does not have the same file name as specified in your IMG tag. The image file is corrupt or damaged.
The magic happens with the background-size property: background-size: cover; cover tells the browser to make sure the image always covers the entire container, in this case html . The browser will cover the container even if it has to stretch the image or cut a little bit off the edges.
It looks like your CSS file is in the views/default/ folder, while the image is in the views/default/images/ folder.
Define image paths in your CSS relative to the CSS file, not the HTML file that displays everything:
background-image:url('images/home.jpg');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
