My footer div is overlapping the content in chrome browser eventhough I have cleared it. Can someonone poin t me in the right direction with the css. Should I use an if is chrome javascript thing?
http://archibaldbutler.com/projects/roaming-giraffe/html/
Thanks
If the footer is designed to be at the bottom of the page all the time, then do this:
.footer-bg {
clear: both;
bottom: 0px;
position: fixed;
width: 996px;
height: 192px;
background-image: url('../html/images/footer-bg.jpg');
background-position: center top;
background-repeat: no-repeat;
}
.content-bg2 {
clear: both;
float: left;
margin-top: 10px;
margin-bottom:192px;
width: 996px;
height: 369px;
background-image: url('../html/images/maincontent2bg.jpg');
background-position: center top;
background-repeat: none;
}
if it is supposed to just be at the bottom of that content area then do this:
.footer-bg {
clear: both;
bottom: 0px;
width: 996px;
height: 192px;
background-image: url('../html/images/footer-bg.jpg');
background-position: center top;
background-repeat: no-repeat;
}
Related
.image {
background-image: url('task pic 1.jpeg'), url('task pic 2.jpeg'), url('task pic 3.jpeg');
background-position: left bottom, left top, center;
background-repeat: no-repeat, no-repeat, no-repeat;
margin-top: 50px;
margin-right: -200px;
margin-left: 800px;
padding: 300px;
border: 100%;
width: auto;
background-size: auto;
position: relative;
}
You can set a static width/height using background-size:
body {
margin: 0;
}
.image {
background-image: url('https://www.enterprise.ca/content/dam/ecom/general/Homepage/inspiration-banff-ca.jpg.wrend.1280.720.jpeg'), url('https://www.enterprise.ca/content/dam/ecom/general/Homepage/inspiration-banff-ca.jpg.wrend.1280.720.jpeg'), url('https://www.enterprise.ca/content/dam/ecom/general/Homepage/inspiration-banff-ca.jpg.wrend.1280.720.jpeg');
background-position: 0 0, 0 200px, 100px 100px;
background-repeat: no-repeat;
background-size: 300px;
width: 500px;
height: 500px;
position: relative;
}
<div class="image"></div>
body{margin: 0;}
.image{
background-image: url('task pic 1.jpeg'),url('task pic 2.jpeg'),url('task pic 3.jpeg');
padding:20%;
background-position: 80% 0%,80% 90%,100% 50%;
background-repeat:no-repeat;
width:auto;
background-size:20%;
position: relative;
}
On a web page i have a div with background image that has width of browser window and fixed height as you can see in code below. I need to make small white squares in corners of background image, i wounder if it is possible to do it with CSS? any other ideas of how to do it are welcome.
.field-node-field-book-airport-transfer:before{
background-image: url(/img.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position:absolute;
left:0;
right:0;
content: "";
height: 25em;
background-color: black;
}
You can create something like this - codepen link
<div class="field-node-field-book-airport-transfer"><span class="topleft"></span>
</div>
.field-node-field-book-airport-transfer:before{
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ0AAAB2CAMAAADle2GlAAAAYFBMVEXMzMzPz8/S0tLV1dXIyMhMTEzY2NhJSUlSUlKwsLC2traIiIjExMS/v7+fn59YWFhra2tkZGRERESVlZV9fX08PDwxMTFdXV1ycnIAAAAjIyOOjo6pqakeHh4pKSkZGRnpOLpJAAACh0lEQVR4nO2W13LbMBBFgUUl2MFqkXH+/y+DQkrWjEvGliYPuedBbLjay8UuQMYAAAAAAAAAAAAAAAAAAAAAAAAA8J/DA3S9OA4Ubn4uumrP068k3zNXKu97mS+oq2MEaow3K/s4GO1jfCEqeq/UEMeJRn0u+RZkx4rJIruj7cWF/6fR1kyW6kMRlxcrwqHxjrGqWym84xeS75krV8HOCeWF7Yp4+irDr+4Huht7ywvvyiXIxFRQnF0TEn6JEtFt95IfIifiRGfcqYruaEvTxp0X6a6r0nO+n8NEudZtcpfqQLQ1DesheaQ77qx2Q7mnvFDX6OSub5IPaWR2ZaM92hZxilrmoju+raEXxLBQkGbrpn6ku6ZclmHo52CPGisouuO2zqGOo2gmznXZnqmjuabkjvFRNXvXS87bIufXuAf2BQ0vuw6hG895bYgld0xlV2SPUKKYq20554zWgXh2R/vSLmYLpWezO1LFQ915HY96dkKFurrL3TWHwcXcXs01vWDZHY1hAeKyNIyelLtUzUzYvSxjvFR3y/627uLjzapzqa186E7uFh3WlSnd1Oug+6fUXaFy7nzRqcjFm1KU430DxoYopiOhTRrnf1kl9y4N4PuqT4l66IpSvcZ25Xyusts0s/UUz8U40mGuTT1TvXmrOLOhUnPXjCXVc1pb8ur5MGgzUmupjlU0d4XoO9J6/304btq8VU23yLnuhFq5FqIJr0ZhwwiSS/VekB/ZU8qcuwIfU1XT6K2x1VFp8thJ5E3FXd5iRtO2vk/L4Z3kcfakc+xaLefXQOVq+jSSvIqrPDBKnvCR8v53xd/GeWPoCdYAAAAAAAAAAAAAAAAAAAAAAACAf8gfFagYayDDn0YAAAAASUVORK5CYII=);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position:absolute;
left:0;
right:0;
content: "";
height: 25em;
background-color: black;
}
.field-node-field-book-airport-transfer {
position: Relative;
}
.field-node-field-book-airport-transfer span.topleft {
width: 100px;
height: 100px;
background: #ffffff;
position: absolute;
top: 0;
left: 0;
}
section {
position: relative;
width: 100%;
height: auto;
min-height: 500px;
padding: 40px 0;
color: #333;
font-size: 14px;
background-image: url("a.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
background-origin: content-box;
}
My css code but background starts at begining of website not under header? how can i solve problem
summary of problem
I'm trying to align an image at the bottom of my DIV, which happens to be the background. Just to make the case even more real, I also added some overlay (as that is how I am doing it in my project).
https://jsfiddle.net/jy0w2jmr/
background-size: 100% 100%;
That will make the background size 100% of the DIV, but not stretched out, so it will be 300px tall (if my DIV is 300px tall).
How do I make it, so when I resize the DIV, the background image also resizes, but sticks to the bottom of the DIV and NEVER overflows the DIV? background-position: bottom; does not seem to stick it to the bottom of my DIV.
Does this work for you?
#container {
width: 100%;
height: 300px;
background: url("https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg");
position: relative;
background-size: contain;
background-position: bottom;
background-repeat: no-repeat;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #333;
opacity: 0.5;
}
#container {
width: 100%;
height: 300px;
background: url("https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg");
position: relative;
background-size: contain;
background-position: bottom;
background-repeat: no-repeat;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #333;
opacity: 0.5;
}
<div id="container">
<div class="overlay"></div>
</div>
guys,
I'm building this responsive website where i have footer at the bottom floating.
On my index.page (http://testi3.aada.fi/) my code works fine, but something is wrong with my content page () even i use same code for the floating footer..
can someone give my a hint how to fix this?
my floating code:
.container {
min-height: 100%;
/* equal to footer height */
margin-bottom: -120px;
}
.container:after {
content: "";
display: block;
}
.site-footer, .container:after {
/* .push must be the same height as footer */
height: 120px;
text-align: center;
}
.site-footer {
background-image: url(../images/footer_bg_trans.png);
background-repeat: no-repeat;
background-position: center top;
text-align: center;
position: fixed;
width: 100%;
bottom: 0;
}
/ Mika
The CSS on your content page is not the same as the CSS on your index page. The CSS for .site-footer on the index page is:
.site-footer {
background-image: url("../images/footer_bg_trans.png");
background-position: center top;
background-repeat: no-repeat;
bottom: 0;
position: fixed;
text-align: center;
width: 100%;
}
Where as on the content page its:
.site-footer {
background-image: url("../images/content_footer_bg.png");
background-position: center top;
background-repeat: no-repeat;
margin-top: 10px;
text-align: center;
}
You're missing width: 100%; position: fixed; bottom: 0;