I'm trying to add a banner image and adjust its size from the CSS. The IMAGE and the CSS are in the same folder, next to each another.
HTML
<body>
<header>
<div class="banner"></div>
CSS
div.banner {
background: url("games_header.jpg") no-repeat fixed center;
background-size: contain;
display: block;
margin: auto;
max-width: 100%;
height: 25%;
}
You have no content in that element, therefore its height is 0 => no visible background. Just add some content and the background will appear.
The height setting has no effect if the parent element doesn't have a set height. If you want the banner to be 25% of the window height, add this rule:
html, body {
height: 100%;
}
I put it all in the html file I created and this works for my image that's in the same directory. You don't need to call it as div.banner, adding the class to the div is enough to just call it by what you name it.
<head>
<style>
.banner{
height: 100%;
background-image: url('./butterbot.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<header>
<div class="banner"></div>
</header>
</body>
background is an inline attribute and would work with root elements such as html or body attributes if you set the background styling to <body>(just an example). Though it is not advised to use it on the html and body but a fixed position div with 100% width and height as shown below
.banner {
background: url("https://picsum.photos/200") no-repeat fixed center;
position: fixed;
height: 100%;
width: 100%;
}
<div class="banner"></div>
Related
I have a background-image set on my div element, but I can't see it. Why is this happening?
<html>
<head>
<title>interior</title>
<style>
.pen {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFFyGF8AZJB_M1TRnINMlytntLg1o5vx11xA&usqp=CAU");
width: 100%;
}
</style>
</head>
<body>
<div class="pen">
</div>
</body>
</html>
The way your code is now (in the question), you need to define a height for the pen element. By default (without contents) height remains zero, therefore no background image will be shown.
.pen {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFFyGF8AZJB_M1TRnINMlytntLg1o5vx11xA&usqp=CAU");
width: 100%;
height: 300px;
}
<div class="pen">
</div>
You need in this case a height of the element and possibly even background-size:
Like this:
height: 300px; /*for example*/
background-repeat: no-repeat;
There is no height set for the image, try this:
.pen {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFFyGF8AZJB_M1TRnINMlytntLg1o5vx11xA&usqp=CAU");
width:100%;
height: 300px;
background-repeat: no-repeat;
}
Your div should have some height you can use this in your code and also you can adjust your height according to you . background-size:cover will cover whole background with your image.
.pen{ backgroundimage:url("https://encryptedtbn0.gstatic.com/imagesq=tbn:ANd9GcTFFyGF8AZJB_M1TRnINMlytntLg1o5vx11xA&usqp=CAU"); width: 100vw; height: 50vh; background-size : cover;
I want to include background image which is oversized (4000px x 3000px) in the div,
in such a way that width will take max width of the screen and height will adjust to it.
I don't know why but it doesn't work if the height is not specified (like 1000px).
The image doesn't appear at all.
I wanted to make jsfiddle but there it works (probably because height is somehow specified automatically)
The part of code (HTML):
<section id="panels">
<h1>PANELS</h1>
<div class="section-img">
<!-- here i want the image -->
</div>
</section>
The part of code (CSS):
.section-img {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-image: url("path/to/my/image");
max-width: 100%;
width: 100%;
height: auto;
}
And with this code nothing appears (as it looks the height is 0px), how can i do the thing that height will adjust to size of width i.e. scales itself.
In your example, the div is inheriting the width of the parent section tag, taking into account any margin or padding on the body element. It has display: block so width is 100% , height is auto so it's the size of whatever inside. So in your case there's nothing inside the div tag, which means it's height: auto; value is 0.
.section-img {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-image: url("https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg");
max-width: 100%;
width: 100%;
height: 100px; // auto means 0 if there's nothing in your div element
display: block; // this is a default for every div tag
}
<section id="panels">
<h1>PANELS</h1>
<div class="section-img">
<!-- here i want the image -->
</div>
</section>
Just try this replace the auto with 100% in height and check.
.section-img {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url(https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg);
max-width: 100%;
width: 100%;
height: 100%;
display: block;
position:absolute;
top:20%;
bottom:0;
right:0;
left:0;
}
<section id="panels">
<h1>PANELS</h1>
<div class="section-img">
<!-- here i want the image -->
</div>
</section>
Are you like this .
Good evening,
I'm very new to html and was searching for a solution but I did not found any. So what I'm trying to do is to fix the background and put something like a panel over it, where I do the rest of the site like text etc. I have an example website: https://420cheats.com
I don't know if I am right but I think I have to add a second class and put this somehow over the background
Thanks in advance.
Ps: I did the background as a class in the css file.
You can just set a fixed background-image on your body element. Both the <body> and <html> tag need a set height of 100% for this to work.
body, html {
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-image: url('https://cdn.cnn.com/cnnnext/dam/assets/170407220921-07-iconic-mountains-pitons-restricted.jpg');
height: 100%;
background-attachment: fixed;
}
.content {
background-color: rgba(204,204,204,0.5);
width: 80%;
margin: 20px auto 20px auto; /* top right bottom left */
height: 1500px; /* remove this, just here to show that it works */
}
<div class="content">
<h1>Content</h1>
</div>
You will need to set the background as fixed and create a DOM element to lay on top of your background image.
body {
background: url('https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1507062474/hotel-everest-namche-nepal-mountain-lodge-MOUNTAIN1017.jpg?itok=g-S4SL9n') no-repeat fixed;
background-size: cover;
}
div {
padding: 20px;
width: 400px;
height: 1200px;
background: rgba(0,0,0,.5);
}
<div>test</div>
I've been working on page for my client and I want to have background image on body (in fiddle there is black color instead of image) and content wrapper with width of 1200px (or so) and height of 100% of the page with white color background.
The problem is, that even though I have all parental elements set to have height 100%, the background is not 100% height. It's acting weird and I've tried to rewrite for 4th time without success. I don't know what is wrong. Could you please give me a hint, tip or solution. Thanks!
html, body {
background: url('./images/background.jpg') no-repeat center center fixed;
font-family: Verdana;
font-size: 14px;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
width: 1200px;
margin: 0 auto;
height: 100%;
min-width: 1200px;
background-color: white;
background-size: cover;
}
.leftcol {
width: 350px;
height: 100%;
float: left;
}
.rightcol {
width: 850px;
height: 100%;
float: right;
}
.footer {
width: 1200px;
height: 50px;
float: left;
text-align: center;
}
Also I have noticed that footer is acting wierd to, it's in the middle of the page in 'rightcol' element.
Here is a fiddle: http://jsfiddle.net/cramb5fg/1/
See if this JSFiddle gets you closer. It has a full screen background too.
It fixes a few errors like:
Clearing your floated column divs by adding a "Clearfix" to the container that now holds only the 2 column divs.
A wrapper that displays at 100% height and width was added to contain the header, main content, and footer. It also has the main background applied.
The float was removed from the footer, and now the footer is absolutely positioned at the bottom, in relation to the main wrapper.
The empty <div class="header"></div> was removed.
HTML Structure in the JSFiddle Example (based on your wireframe)
<div id="main-wrapper">
<div class="navigation">
<nav>
<h1><i class="fa fa-car">Title</i></h1>
</nav>
</div>
<div class="container clearfix">
<div class="leftcol">
<div class="sidebar">
<div class="sidebar-head">Title</div>
<div class="sidebar-body"><p>...</p></div>
</div>
</div>
<div class="rightcol"><p>...</p></div>
</div> <!-- end container clearfix -->
<div class="footer">Copyright © 2014</div>
</div> <!-- end main-wrapper -->
Give this wireframe a good test because some details may have been overlooked, also test by enlarging and reducing the browser area, and holding down CTRL+ or - to to enlarge and shrink the screen.
I'm not sure exactly what you are trying to do but your example code is different than your fiddle. You should be able to make your background 100% easily.
html {
background: url(http://placehold.it/400) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
See fiddle here
Also, check out http://css-tricks.com/perfect-full-page-background-image/ for more info
edit: I've updated your fiddle with what I think you are trying to do
CSS heigh will if you define position absolute/fixed. such:
.class_name{
position:absolute;
height:100%;
top:0;
left:0;
}
One more important matter: top and left also compulsory.
Hi i have a header image which I want to be 100% width, however my body tag is already styled with width, is there a way to override it? I tried putting the img div before the body tag in the HTML but that doesnt work, neither does using !important on the width of the img div
CSS:
Header:
.header-img {
width: 100% !important;
height: 40%;
background-image: url('/v2/img/header.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
position: relative;
}
body:
body {
padding-bottom: 60px;
font-family: 'Finger Paint', sans-serif;
width: 60%;
margin: 0 auto;
}
HTML:
<header><div class='header-img'>title</div></header>
your working upside down.
body is the wrapping element of the page, this is why it should have the maximum width/height.
you can try to play with the "position" css attr on the header element but thats just bad practice.
you need to create something like:
<body>
<header style="width:100%;">title</header>
<content style="width:60%">wrapper for all content</content>