I am working on setting up my opencart store. I have one large image as my background for my whole web page. Then all of the content scrolls over it and it stays put. The problem is that the background is not scaled correctly. It is scaled larger than the page. How can I get it to scale to 100% with opencart?
on my home page I have an img element and then use this to scale and position it.
img.bg {
min-height: 100%;
width: 100%;
height: auto;
position: fixed;
top:0;
left:0;
z-index: -999;
}
but with open cart I have to sent the image using the stylesheet rather than an image element. So I'm not sure how to apply these styles to the background class. The image is set to the background property of the body class.
The body CSS is probably the problem. You could try this
body {
max-height:100%;
max-width:100%;
}
Related
Is there a way to for web browsers to enable scrolling the entire height of a background image with background-image-size: 100%? I want to image to cover the entire viewing area horizontally, but doing so cuts of some off the image at the bottom. I want users to be able to see the rest of the image if they scroll down.
If you set to body tag a background image it will be shown in full height of page. Page height will depend on how many content on page.
From what I can tell, the answer is no. Instead, I wrapped the image in an img tag. Once it became content, scrolling worked as desired. Unfortunately it mean adding a z-index css property to the other content to get it to appear over the image.
Here's a snippet:
body {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
}
#image {
width: 100%;
margin: 0;
}
#content {
z-index: 100;
}
Currently developing a portfolio theme for a friend and trying to create a video background in the hero area.
Currently, it appears the video is only taking its natural width, is there any way to force this to stretch to fill 100% of the div? I'm not worried about quality, it's blurred anyways.
I'm using videoBG to embed the video content, and the following styles are applied to the containing div:
#hero {
min-width: 100%;
display: block;
height: 400px;
margin: 0 auto;
}
It was actually the 100% height that I was applying to the video that was throwing it off in the first place. Changing this to auto let the video stretch while setting overflow to hidden.
Try to use that:
#hero { /* div filled by video */
position:relative;
/* other properties ... */
}
#video { /* video div */
display:block;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
I am working on Bootstrap theme where its responsive. I disable the responsiveness on a child theme by adding a code in functions.php. All works well , no problem.
Now the parent container, is now fixed:
HTML:
<div class="container">
CSS:
.container{width: 940px;}
But I would like the footer section to have sitewide background color. How do I able to do this?
I have tried setting different methods like width:auto, width: 200% ,but its not giving me the desired result.
Supposing this is the footer section:
<footer>
My footer
</footer>
My attempted CSS on a child theme(not working)
footer {
background: #CCCCCC;
width:100% !important;
position:absolute !important;
}
Also is this possible without setting too many !important on CSS property? Thanks.
If your footer is inside the div.container which has width:940px; then giving your footer 100% width will make it 940px wide.
You need to have the footer outside the container to give it 100% width of the body.
When you give 100% width, the element gets its container's width. So in your code, even with the important keyword, it'll get the container's width (because that what 100% is supposed to do).
Just take the footer outside of the container.
Then it'll work and you won't need this !important keyword.
As others have mentioned, removing the footer from the parent container of .container will allow the width of it to be the entire size of the viewport/document.
If you are unable to change this level of structure of the HTML due to your template, you can fake the width using pseudo-elements, like so:
footer {
position: relative;
background-color: lightblue; /* Match the color of the body background */
}
footer::before, footer::after {
content:"";
position: absolute;
top: 0;
bottom: 0;
width: 9999px;
/* some huge width */
background-color: inherit;
}
footer::before {
right: 100%;
}
footer::after {
left: 100%;
}
See jsFiddle.
Taken from CSS Tricks: Full Browser Width Bars
I am still trying to get the hang of responsive web design.
I am not able to get the header images to scale as the browser gets smaller.
This is the site,
http://instreamenergy.com/strategic-partnerships/
if I try to make the .header-image #header #title-area height:100% or anything else it just reverts to 20px or something and is stuck there.
Any tips would be awesome!
thanks
I think you're looking for the CSS3 property, background-size
since your image is a background image for a DIV.
Stretch and scale CSS background
http://caniuse.com/background-img-opts
If you were using an image tag, <img> you could do this:
img {
max-width: 100%;
}
You also need to get rid of some of the cruft in your CSS for #title-area. Doesn't look like it needs to be floated: left; or have overflow: hidden;. Removed width, changed height to min-height. no-repeat added to background.
I would update it to:
#title-area {
background: url(your-image.jpg) no-repeat;
padding-left: 0;
min-height: 386px;
float: none;
overflow: visible;
background-size: 100% auto;
}
Say that i want to have a couple of divs on my page with images in the background (like this: http://www.ubudhanginggardens.com/). I know how to set the size of my divs, but the problem is that the background image stays the same if I make the web browser smaller... I want the background image to scale up/down with the web browser.
CSS
body, html {
height: 100%;
width: 100%;
margin: 0px;
}
#container1 {
float: left;
height: 100%;
width: 50%;
background-image: url(../img/1.png);
}
#container2 {
float: left;
height: 100%;
width: 50%;
background-image: url(../img/2.png);
}
This can be done with pure CSS and does not even require media queries.
To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.
Source
CSS:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
And if you want to enforce a fixed max width of the image, just place it inside a container, for example:
<div style="max-width:500px;">
<img src="..." />
</div>
jsFiddle example here. No javascript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).
If you would like to have your image scale with your browser, set the width to a percent instead of defining it as a number of pixels.
So if you wanted the image to always cover half of a div:
<div class="my_div">
<img src="http://example.com"></img>
</div>
<style>
.my_div .image {
width:50%;
}
</style>
As you change your browser window size, the size of the image will change. You might want to take a look at Responsive CSS Frameworks, such as Twitter's Bootstrap, which can help you achieve exactly this behavior.