I am coding my website on CargoCollective. I wanted the home page to have a different background image than the rest, to be precise I wanted it to have a full-scale GIF, while the other pages should only have a background color. I did find the CSS code for the full-scale background, but the problem is that when I go first to the homepage and then to the other pages through the links of the sidebar, the background image remains, instead of turning to background-color. The weird fact is that whenever I refresh the pages or directly go to them (without passing from the homepage), that background image doesn't show up and it is the color I chose. What is the problem?
body {
background-color:#ffe0e0!important;
color: #f54a63;
font-family: sans-serif;
font-size: 14px;
text-align: left;
line-height: 2;
position: relative;
top: -40px;
width: 100%;
}
body.home {
background: url(payload498.cargocollective.com/1/22/724019/12271389/gif14.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body.pages {
background-color: #ffe0e0!important;
}
One way is to simply add the code inline on your home page:
<body style="url(background:url(myGif.gif) no-repeat 0 0;background-size: cover;"/>
A second way is to overwrite the css with javascript/jQuery when you load your home page:
$('body').css({'background-image': 'url(myGif.gif)', 'background-size':'cover'});
A third way is to simply add a full screen div with the background attached:
html,body{height:100%;padding:0;margin:0;}
body{
background:#000;
}
#coverDiv{
height:100%;
width:100%;
background:url(https://media.giphy.com/media/9fbYYzdf6BbQA/giphy.gif);
background-size:cover;
}
<div id="coverDiv">
This div goes on my home page only.
</div>
Try adding this class to your style sheet. It will cover the case where you're navigating from your home page to another page. The rule for css is that the most specific class/selector wins in priority, the problem you were having is that body is more generic than body.home also it needs to be the same attribute, so background instead of background-color.
body.home.open {
background: #ffe0e0;
color: #f54a63;
font-family: sans-serif;
font-size: 14px;
text-align: left;
line-height: 2;
position: relative;
top: -40px;
width: 100%;
}
Related
I'm setting up a site, and want to create a responsive background image but I'm getting only single line with background image. What property should i need to use to make the entire background image to fit?
I created 2 files,
index.html :
<div id="logo">Test</div>
style.css :
#logo {
background-image: url("bg.png");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
I tried many times but only single line gets background image. I want the background image to be fully displayed on screen without using height property which i think makes site less responsive.
you should change the height of logo div and set it as full height by adding height:100% for the body and logo div, your code should look like below code
html, body
{
height: 100%;
}
#logo {
background-image: url("bg.png");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height:100%;
}
If you want the image to have the same height as the screen you can use height:100vh. But if you want only the image full size you can do this like this :
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#image{
max-height: 100%;
max-width: 100%;
}
#text{
position: absolute;
color: white;
top: 0
}
<img id="image" src="https://images.unsplash.com/photo-1528920304568-7aa06b3dda8b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
<div id="text">test</div>
So I am using unsplash for some images for my html page. Whenever I am including the backgground url I am not seeing it in my html page. I am receiving my images from https://unsplash.com/
I am just finding a picture right click copy image url and pasteing it into my body background url but I am not seeing any image background what am I doing wrong?
body {
background: url(https://unsplash.com/?photo=vZlTg_McCDo);
background-size: cover;
}
#content {
text-align: center;
padding-top: 25%;
}
Use background-image: instead of background:
According to their API documentation, your image URL should be of the following syntax
https://source.unsplash.com/{PHOTO ID}/{WIDTHxHEIGHT}
Here is the modified form of the code in your question
body {
background: url(https://source.unsplash.com/vZlTg_McCDo/1600x900);
background-size: cover;
}
#content {
text-align: center;
padding-top: 25%;
}
On my site I've got unwanted white margin on the right side, I don't know why. All containers on my site are contained-fluid, and also I added to my css no padding and no margins for containers.
html,
page {
width: 100%!important;
margin:0;
font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
padding-right:0px;
padding-left:0px;
color:#333;
}
container, container-fluid {
width:100%0!important;
padding:0!important;
margin:0!important;
}
I'd like to put a footer on down of site, I tried with position: absolute and margin-bottom, also tried overflow hidden but it doesn't work for me.
<div class="navbar navbar-inverse navbottom">
.navbottom {
background: url(../img/footer.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-color:#679003;
-moz-border-radius:0px;
border-radius: 0px;
border-style: none;
position: relative;
margin-top: -50px; /* negative value of footer height */
height: 50px;
clear:both;
padding-top:20px;
overflow:hidden;
margin-bottom:0!important;
full html and css
https://jsbin.com/biwuyewipi/edit?html,css,output
site:
http://fotozorza.pl/
Firefox inspector tells me that this is your top nav bar. I am not familiar with Wordpress, so sorry that I am not able to help you more.
Also inspector says, that the rest is fine.
this is because of google map width change it to 98vw.
EDIT :
add following snippet to css
.row{ margin-right:0px; margin-left:0px; }
and reduce the width of google map i_frame. this is the cause of problem.
On my website I have included a background (on the contact page). However when I put in the background it does not cover the header. It has done it on the main page but not on the contact page? I have tried to use
#siteWrapper{
background-image: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/1415654282657/Website%20Background%20Trees.png");
background-repeat: no-repeat;
background-size: 100%;
}
So here, it puts the background in and it fits it to the screen with background-size: 100%; but this has only put it over the content. I have tried to put the background on the body however that has put it behind the content. So the main goal is to try and include the background into the header as well as the content (like the home page). - Thanks
Try setting the background image on the #site element instead.
Solution #1:
You're using position: relative for your header on your Contact page, but absolute on your main page.
Use this CSS for all page but homepage:
header {
position: absolute;
top: 0;
left: 0;
background: none;
}
#siteWrapper {
padding-top: 106px; /* leave some space for header */
}
Solution #2:
Move your background image on #site, and remove black backgrounds:
#site {
position: relative;
background-image: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/1415654282657/Website%20Background%20Trees.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
header,
#siteWrapper {
background: none;
}
Sidenotes:
Be careful, the Submit button may appears exactly where there's a lightning area in your background image, making it unreadable:
CSS changes:
//Change this #site css to
#site {
background: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/1415654282657/Website%20Background%20Trees.png") repeat scroll 0 0 / cover rgba(0, 0, 0, 0);
position: relative;
}
//Remove this below class css
.collection-545e428fe4b0f79db6910e91 #siteWrapper {
background-image: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/1415654282657/Website%20Background%20Trees.png");
background-repeat: no-repeat;
background-size: 100% auto;
}
//remover background-color css in below two section "background-color: #100806"
siteWrapper{background-color: #100806;}
body.transparent-header:not(.has-banner-image) #header{ background-color: #100806;}
#site{
background-image: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/1415654282657/Website%20Background%20Trees.png");
background-repeat: no-repeat;
background-size: 100%;
}
Remove header from:
body.transparent-header:not(.has-banner-image) #header {
background-color: #100806;
position: relative;
} //site.css line 10
I am in the process of designing a web page and I'm using the following CSS to create the page header with the main header image centered in a 1000px width page, and for a repeating edge image going across the top of the body and underneath the header to spread across the whole browser page width.
body {
font-family: Tahoma;
background-color: #0184AE;
background-image: url('/images/headeredge.jpg');
background-repeat: repeat-x;
background-position: top;
margin: 0;
position: relative;
}
.whole-page {
width: 1000px;
margin: auto;
padding: 0;
text-align: left;
position: relative;
border-radius: 0 0 15px 15px;
}
.header {
width: 100%;
height: 120px;
color: white;
background-image: url('/images/header.jpg');
background-repeat: no-repeat;
font-size: 10pt;
margin-top: 0px;
margin-bottom: 0;
padding-top: 10px;
border: 1px black none;
position: relative;
}
The CSS above works, except when a toolbar appears. I'm using Chrome with a SEO toolbar and it displaces the centered header image correctly, it pushes it down underneath the toolbar so I can see the whole image.
However, the repeated body image is not displaced at all and the toolbar covers the top so many pixels. This puts the whole thing out of whack.
I've tried a few options in the CSS, but so far nothing seems to work. I'm guessing here, but I think the toolbar draws itself using CSS that 'exists' under the body tag.
Can anyone suggest anything, I'd like either the whole header pushed down, or not. Just so it's consistent.
Using the Chrome developer tools (hit f12) you can inspect (click the magnifying glass icon on the bottom) the toolbar element. Doing this you can see that it is indeed inserted to the body of document. This will unfortunately result in the actual behavior you are seeing. In other words, this is not your fault but the fault of the toolbar developers.
One (ugly) work around is to throw an additional div around your content and apply the background to that.
E.G.
HTML
<body>
<div id="notBody">
<!--Rest of your headers, content, etc here -->
</div>
</body>
CSS
body {
font-family: Tahoma;
background-color: #0184AE;
margin: 0;
position: relative;
}
#notBody {
background-image: url('/images/headeredge.jpg');
background-repeat: repeat-x;
background-position: top;
}
in your header class change to position: absolute; and use top to set how many pixels you want your header to be from the top of the page.
.header {
position: absolute;
/* all your other styles */
top: 200px;
}