This is such a strange issue - I'm trying to add in a responsive background image to a really simple site, and I can see that image flicker on the screen while the page loads, however when the page load is complete the image disappears and I'm left with a white background.
Here's the css:
body {
background: url('#') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Here's the site.
The problem is that all your elements have an opaque background-color. The image is there, it is just covered up by everything else. Remove the backgrounds from all the child elements, or use a rgba color.
This is something that your theme is doing, using Javascript. If you look in here, you will see the line
`$("#main-wrapper").animate({ opacity: 1 }, 750);`
This is run when the page initialises, and causes the opacity of themain-wrapper element to animate it's opacity, causing the fade you are seeing.
Your options are:
Change your theme to a different one, or
Create a child theme and then edit the main.js file to remove the offending line. This has the advantage that you can keep all the theme, and your change will be protected from theme updates.
the problem is your every <div> has background and you are applying background image on body, Applying any thing on body will not help you as i see you buy this theme from someone you need to ask them how to add background on this site.
Try bootstrap. You can add a background image to a container
<div class="container background">
</div>
your css
.background {
................
}
Related
I have made a background image, 1366px wide and 768px high, which I want to use as background for the main page of my website.
I have each page of my website divided in sections, using the FullPage plugin.
This is the main page so I'm using just the first section.
What I've tried so far is adding this CSS code to the #first section of my main page:
#first{
width: 500px;
height: 500px;
background-image: url(images/ClanshnowXmasEventSmall.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Unfortunately the image gets displayed just partially. In fact it's a little shorter than it actually is.
I read the documentation for the background-size attribute, and at the cover attribute it says:
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
So basically how can I make my background-image fit the screen size? Considering the mobile side I think it would be better to fit just the width of it. I'm open for suggestions and help!
Take a look over here: https://www.google.be/amp/s/css-tricks.com/perfect-full-page-background-image/amp/?client=safari
Good luck!
So I have tried to get rid of this white space to the right of my website for ages now. I've tried all the overflow-x: hidden rules but none of them seem to work.
I have ruled it down to when I remove:
(div id="content5" style="position:absolute;")
(img style="width:175px; height:175px;" src="Images/Graphic.jpg")
(/div)
from the html file then the white space goes away. How do I put the picture on my web page without getting the white space? Don't worry I am using angle brackets for my html.
You can view my website here.
CSS:
view code here
HTML:
view code here
Make the width of the #content5 element set to the pixel width of the image:
#content5 {
width:175px;
}
Right now, the width is set to 50%. But that essentially sets it to 50% of the width of the parent element, which is the whole page. If you look in the inspector, the divs containing all of your images are much larger than they need to be because of this.
EDIT: Included inspector image of Chrome session
#Daniel Ravens if you insert the following code it should fix your problem:
html {
background: url(Images/FrontCover.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This code basically stretches everything on the page to make it fit I got this code from the following site:
CSS Tricks
So I am having just a small issue with a site that I am modifying for a client: http://gator3094.hostgator.com/~sunhome/staging/.
As you can see, the background image that I am putting around the <header></header> tags is not stretching the full height of the div.
Here is a link to my CSS file (everything else is just stock Foundation Framework): http://gator3094.hostgator.com/~sunhome/staging/wp-content/themes/sunpower_theme_sunsolar/library/css/custom.css
Here is also the CSS code that I am using for that particular section of the site:
header {
background: url('http://gator3094.hostgator.com/~sunhome/staging/wp-content/uploads/home-bg2.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have done these full-width cover backgrounds with CSS3 a million times, but I have absolutely no idea why this time the image won't cover the entirety of that div.
Hopefully it's just a super simple fix. I would really appreciate any and all help.
Your issue is because of the lack of appropriate cropping of your background image.
Try this with your header tag:
header { background: black;}
You'll see that the background takes up the appropriate dimensions of the div. The reason white space is showing is because your background image has a lot of extra transparent space around the image. So the background is repeating appropriately, you just need to crop it so it will show the part of image you want.
Still dont belive me?
Try replacing it with this:
header { background: url("http://placekitten.com/1800/950");}
I'm just starting to understand enough HTML / CSS to drive myself crazy trying to implement new things.
I'm trying to create a landing page with a full width / height background image that resizes with the viewport. That's an easy enough proposition if you're not using any css framework but I'm trying to build bootstrap into the page.
With bootstrap any content that I add below the body selector clears my background image as if it were part of the normal box model. If I remove bootstrap the page functions as expected and overlays the content on top of the background image. I'm guessing something in bootstrap is clearing all page elements but I haven't been able to find it.
The code I'm using to apply the background image is:
html {
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: -999;
}
There is an (indirect) example of a fullscreen background image using Twitter Bootstrap in this blog post.
The gist of it being:
body {
background: url(../img/bg.jpg);
}
This is my tumblr blog:
thestorywithnoending.tumblr.com
the code for the blog is a theme I got here:
http://themes.pouretrebelle.com/lycoris/?download
(just scroll down a bit, the whole code is there)
I want the background image to just be ONE image...
I know I'm not being descriptive enough, so to fruther explain: I want it to be like this:
http://chloescheffe.com/
you see how on that website the background image is.... everything basically. And when you change the size of the webpage, the background image changes accordingly?
how can I do that on my tumblr blog?
THANKS :)
with css. set the height and width of your bg image to 100%. sorry, i'd give you the code but this keyboard doesn't have all the characters of a larger one.
use the background-size css property w3schools.com/cssref/css3_pr_background-size.asp
You can do this two ways using background-size. One will stretch the image and one will fill the width properly, but cut off the bottom.
For stretch, add this to your body CSS:
body {
background-repeat: no-repeat;
background-size: 100% 100%;
}
For width-fill (this looks better with your current blog), add this to your body CSS:
body {
background-repeat: no-repeat;
background-size: cover;
}