I am using blogger and recently inserted this cc code in to the advanced section of the template designer to input a background image
body {
background: url(http://img854.imageshack.us/img854/9854/ied6.jpg) no-repeat;
background-attachment:fixed;
background-color: none;
}
.body-fauxcolumn-outer div {
background: none !important;
}
The problem is that when the browser window is resized the background stays the same but all the widgets/elements on the page resize along with the window.
See www.ashlylondon.blogspot.com
I need the background to resize along with the widgets so that they stay in the white area on the background image.
You are relying on background resizing so much that your layout won't work without it. That's not ideal. The typical approach to a situation like this would be:
Have a background image that covers the entire screen
Give the <div> element that contains the actual content a background-color: white property.
You can still use background-size to scale your background image to the screen size, but it no longer is necessary for the layout to work.
this woul make sure your content is always readable no matter what; it'll work where background-size won't, e.g. in older browsers and some mobile devices.
add this to your css
body{background-size:100%;}
try this
add in body class background-size:cover;
http://jsfiddle.net/pyFbF/3/
body {
background: url(http://img854.imageshack.us/img854/9854/ied6.jpg) no-repeat;
background-attachment:fixed;
background-color: none;
background-size:cover;
}
.body-fauxcolumn-outer div {
background: none !important;
}
Related
I'm using a template from semantic-ui. This one: https://semantic-ui.com/examples/homepage.html. Essentially i'm trying to change the height of the background to match the height of my image. Right now my image (the one in background-image) shows up but the background (which I turned red simply to see it better) is larger then it so I have this dead space between my background-image and the beginning of the content.
The only way I seem to be able to manipulate the background is the color. Any other time i'm changing it's size (which i've experimented with quite a bit) it only seems to change the size of the image. Not the red background.
Perhaps i'm not understanding the relationship between the two? Any tips on how to change the background's height to match the background-image?
Any help is appreciated.
CSS below:
.ui.inverted.vertical.center.aligned.segment {
background: red;
background-image: url('./images/backgroundLogo.png');
background-repeat: no-repeat;
/* background-size: 100%; */
background-size: 100% 507px;;
width:100%;
}
I found it. There was a native min-height: property that was over riding my attempts to change. Simply put in
min-height: 500px !important;
and it worked.
Scenario :
I have a Wordpress site which has an old theme and doesn't allow me to change the header image.
As a workaround on a page where I want a different image, I have
hidden the header image using CSS and replaced it with a background
image, which works fine and is responsive.
Todo :
However I needed to set a height for the area in order to make a space for the bg image to show up at full size (which I have done using a "padding-top")
which causes a large space underneath the background image whenever
the window is resized down, or on phones.
Is there a way to make the
space underneath the image collapse down as the image also collapses
down?
URL: http://www.annareynolds.org/lovehobart/
My Custom CSS:
.singular-page-691 #header img {
display:none;
}
.singular-page-691 #branding {
padding-top:390px;
background-image:url(http://www.annareynolds.org/wp-content/uploads/2018/08/love-hobart-crop.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position:top left;
}
only use padding in %
like:
.singular-page-691 #branding {
padding-top: 40%;}
http://prntscr.com/kj6z3j
I have visited the link you have provided and checked the responsive. I assume that I worked on the right place as your question asked.
You have paddding-top:390px in .singular-page-691 #branding It cause the space you mentioned. You can adjust the value of padding-top in responsive. I tried with padding-top:180px and it seems fine for me.
I'm working on a hybrid app in Ionic. I set a background of div like this:
.loginForm {
background: url(../img/bg1-web.jpg);
background-size:cover;
}
If the keyboard appears in the form, the background image resizes because the height of device reduces.
This is the normal behaviour and this is right. But I would like that the background image not resizes and stay fixed. I tryed with background-attachment set to fixed but not work.
Is there a way?
Use
background-size: 100% 100%;
background-attachment: fixed;
instead.
I want to make a background like this except using an image instead of the blue background: http://gakeyclub.org/
Notice that resizing the window of the browser does not disturb the background. What do I need for this?
According to your comment, what you are asking is to have your background center on your page. To do so use background-position this will tell the browser where to position the background according to its container.
background-position:50% 50%;
You might like to add some other background attributes such as background-repeat:no-repeat to make sure the picture does not repeat on huge resolutions.
this is how your css should be looking for a fixed image as background:
body
{
background-image:url('image.png');
background-repeat:no-repeat;
background-attachment:fixed;
}
Why do you want to use an image. It will just increase the size of the page. Use this code:-
background: none repeat scroll 0 0 #002f5f;
I cannot seem to get my background image to stretch vertically (with CSS) and have not been able to get it.. What's the best way to do this without using a jquery plugin?
http://realestateunusual.com/
Currently have
div#whitewrap {position:fixed; top:0; left:0; width:100%; height:100%;}
Although the question is unclear, I assume you want the houses to appear at the bottom of the page?
The body does not fill the screen unless it has to. Thus, your whitewrap div only fills 100% of the body.
Either you need to set the body height to 100% too (although this is slightly hacky) or set the background of the body to the image. This will then have the background image at the bottom of the screen (despite the body not being the full height - confusing right?).
Your HTML is hard to inspect however, due (I assume) to the software you used to create it adding in more divs than I thought possible!
EDIT: after closer inspection, it looks as if you need to set the background-position attribute to force the image to the bottom. Then, you can set the background-color to be the same as the colour of the sky at the top of the image. This should create the effect you desire without having to actually stretch & distort your image.
You can do this completely using CSS: using the background-size attribute.
body {
background-image: url(http://placekitten.com/250/150);
background-size: 100%;
}
See http://jsfiddle.net/5TSVP/.
You should look into Media Queries in your CSS and store different resolution images for major platforms. The images can then resize between with browser.
Media Queries: http://www.w3.org/TR/css3-mediaqueries/
#media (min-width:800px) { background-image: url(bg-800.jpg) }
#media (min-width:1024px) { background-image: url(bg-1024.jpg) }
#media (min-width:1280px) { background-image: url(bg-1280.jpg) }
CSS for img tag to let it resize:
img { max-width:100%; }