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);
}
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!
I have a problem with html and css.
Today, for the first time, I've tried to make a page with a big image for the background.
I'm using foundation framework, and I'm stuck on one thing. As we know foundation is a adaptive framework and when I re-size my browser, I've got a bug.
You can see it on my screenshot: https://imgurhd.ru/i/270a.jpg (also here you can find my css).
I need to make the text and image under menu vertically centered on any screen size.
I'm using position relative with a percent value, as you can see. So please help me to find where is the problem.
You can set the background size to cover.
Cover
This keyword specifies that the background image should be scaled to be
as small as possible while ensuring both its dimensions are greater than or
equal to the corresponding dimensions of the background positioning area.
html {
background: url(/*YOUR IMAGE HERE*/) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This is supported in most recent browsers
I am trying to customize Twitter Bootstrap's splash sign-in page.
I haven't touched the HTML, but I am trying to edit the background of the splash page.
Here is all the CSS I have added:
html {
background: url("../img/bumpit_splash.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
What is happening is the top-half of the splash page retains its white background, but the bottom half gets the color of the background image I am trying to replace it with.
Thank you in advance for any help.
Hard to tell without a preview, but i'm guessing your <body> tag has a white background, and because its a login form, its not as tall as the <html> tag(your viewport).
Disable the background color for <body>, or make it 100% tall and add the background this instead of the html element.
I'm making a pretty simple html page for Facebook, I want a big image as the background and little images as buttons all over the bg, I want to know how can I code the background and the "buttons" so these take you to a different page.
For buttons you just need to create the element, and then add in the link attribute.
So for creating a button that links to Google.com:
<button onclick="location.href='http://www.example.com'"> www.example.com</button>
Often people will have a div that contains that majority of their body of their html. So you can use:
background-image : url('image.jpg');
attached to your div or body tag.
A similar more thorough approach would be to just attach it to your html selector, like so:
html {
background: url(image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I've made a FIDDLE to give you an example of how to use background-image, and a button that links to Google.
You can of course style any of these elements.
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");}