I want to place a PNG with some transparency (a white column) over a tiled background on a webpage. It should stretch/tile out vertically (not horizontally) over the whole page. I'm just using CSS and HTML. I'm guessing my understanding of DIV's and CSS is lacking, for which I apologize.
Here's what I have, as a result of a lot of fiddling:
body {
background-image:url(bin/back.png);
background-position:left bottom;
}
#second-background {
position:absolute;
height:100%;
top:0;
margin: auto;
background-image: url(bin/column.png);
background-repeat: repeat-y ;
}
It's being displayed but I can't get it centered and on top of that it displaces the rest of my content. I've read through how-to-recreate-silverbacks-parallax-effect on thinkvitamin, but I can't get it to work myself.
Here's a link to a demo where you can see it in action.
I believe that you need to set a fixed width on #second-background. Otherwise, with no content in it, it has no width.
Edit: I'm sorry, I didn't read your question thoroughly. Let me check out the demo and investigate further.
Edit 2: Ok, if you want the white column image over the whole page and centered, then you'll need to set #second-background to width: 100%; and background-position: center top;. This will also allow #inner-body to center correctly.
Let me know if this isn't what you were going for.
I'm making a few assumptions here, but I think it'll work out:
Firstly, add this to near the top of your CSS:
html, body {
margin:0; padding:0; border:0
}
On #second-background, add width: 100%.
On #second background, either add background-position: center top, or scrap all of your background- properties and replace them with this: background: url(bin/column.png) repeat-y center top.
Tested in Firefox, with Firebug.
If you would like me to explain why these changes work, just ask.
Related
So i made a html page with background image of a person on it like this. I want to make it responsive, so that when I open the web on the phone, the person is on the center (shows the center of the image). For now the output shows the left part of the image like this. Is there any part in the css that i can change to make that happen?
Change your HTML code like below. You may see the Link
<div class="imageDiv">
<img class="imageClass" src="../yourfile/" />
</div>
Then try with the following CSS:
div.imageDiv {
position:absolute;
max-width:45%;
max-height:45%;
top:50%;
left:50%;
overflow:visible;
}
img.imageClass {
position:relative;
max-width:100%;
max-height:100%;
margin-top:-50%;
margin-left:-50%;
}
Using the image given in the question (which is a screenshot, but I assume contains most of the actual image) I think it may be possible that using just plain CSS without regard to exactly where the figure's head is in relation to the image dimensions will be good enough for your needs.
This snippet uses both background-size: cover - to ensure the whole of the element (in this case the body) is covered and background-position: center center - to get (roughly) the head in the center both vertically and horizontally.
It would be useful to check using your actual image rather than the mockup from the screenshot but hopefully this snippet shows the basic idea:
body {
background-image: url(https://i.stack.imgur.com/E2Emo.jpg);
width: 100vw;
height: 100vh;
background-size: cover;
background-position: center center;
}
<body></body>
Ok, I'm trying to design a website that has an image at the top that spans the full width of the browser. And below that I want to put different colored div containers that also span the full width. kinda like this:
http://hayden-demo.squarespace.com/
I've tried background-size:cover but I want different backgrounds for each section of the page. The only thing I've found after many hours of searching is width: 100% but it leaves white borders around my image...
Please help, I'm desperate. This is my current CSS:
.mainimg {
background-image: url(_DSC0656.jpg);
background-repeat: no-repeat;
background-position: center center;
-moz-background-size: cover;
background-size: cover;
width:100% !important;
height: 700px;
margin:0 auto;
display:block;
}
The body element has some margins by default. Unless you remove them, any element that you put inside, no matter it's width (unless it's in position absolute I think) will have some borders. They aren't borders, but the gab in between the end of your element and the side of the body. Try this :
body{
margin: 0;
}
If that doesn't work, then please show us an example of your code on JSBin, Codepen or similar (or even a live version if possible).
did you tried to reset the margin and padding of all element to 0, if not then try following code into your css file.
*{
padding:0;
margin:0;
}
I am struggling to position an image that I am using as the background as auto. I also have an article tag that will not centre.
How do I fix the issue with the following code?
body {
background:url('index1.jpg')no-repeat;
width:auto;
}
Try this:
body {
background: url('index1.jpg') no-repeat center center;
background-size: cover;
}
This should center your background image and resize it accordingly. Hope this helps.
EDIT (Pertaining to your comment):
First off, in order to obtain a border on an element you use the border, not border-radius. border-radius will round the edges of an element rather than add a border itself.
In order to center objects you need to use margin: auto;. This will place the content in the center of its parent container.
Here is a fiddle of the working code: JS Fiddle
In the future please attempt to do a little research and figure things out on your own. All of these solutions could be found on existing questions on SO.
Hello on my login page I have a background image. Currently the image is centered but not centered the way I want it. I want it so the image is always centered in the middle of the screen. Curently, my image is centered but is positioned at the top of the page. The image need to be positioned in the middle of the screen, and kept centered.
login.html
<body style="background-image: url({{MEDIA_URL}}/admin_media/img/admin/bigstock_Photo_Showing_Financial_Growth_1339836.jpg); background-position: 50% 50%; background-repeat:no-repeat;">
may be you have write like this :
background-position: center center;
EDIT:
may be there problem with the body because it not takes screen entire height so if you want an image show in the center of the screen then write
html,body{height:100%;}
body{
background:url(http://www.poster.net/van-gogh-vincent/van-gogh-vincent-sternennacht-2601013.jpg) no-repeat fixed center center;
}
check the example http://jsfiddle.net/sandeep/m2fZs/2/
Instead of continuing to post comments, I thought it might be smarter to create a new answer.
Would something like this demo work for you? (replace 'fixed' with 'scroll' , if you want the img to scroll up and down with the page)
try it like this:
#element {
background-attachment:fixed;
background-position:center;
}
this should work!
I'd like to have separate background images on the top and bottom of my site but can't quite seem to nail it. I would like the images to stay at the absolute top and bottom of the page.Below is a shot of the site mockup, and a shot of the backgrounds on their own with dimensions.
The mockup doesn't show it, but there will be text links and copyright info at the bottom. You can find my failed attempt at coding at www[dot]dev[dot]arbitersoflight[dot]net
Mockup
img683[dot]imageshack[dot]us/img683/4502/mocky[dot]jpg
Backgrounds
img233[dot]imageshack[dot]us/img233/1293/94210454[dot]jpg
Note: The backgrounds are 1200x400 each.
EDIT: At this point I can get the two images to show up without fail, the problem is getting the bottom image to stick to the absolute bottom of the browser window. It seems that it is currently at a fixed position. Below is my CSS and HTML..
UPDATE (Solved): I finally solved this by reworking my code based on this guide: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ Thanks for all of the suggestions everybody.
You could use the second image as the body background, set a color too, and the first image as the container's background. Or vice-versa, but remember to align the background, and if you switch, mind the container's height.
The body and html background (like the suggestions from zzzzBov and nemophrost) don't work in my Firefox...
body {
background: #DDD url('2.png') no-repeat center bottom;
}
.container {
background: url('1.png') no-repeat center top;
}
Another thing you can do is set a background image on the body and on html.
body {
background: url(...);
}
html {
background: url(...);
}
You can see jqueryui.com for an example of this.
What you can do:
The menu is a div with an own background to fit the upper area.
Then apply the background with the bottom part to the body or content/page container that you are using.
It sounds like you want:
html
{
background: url(...) no-repeat top; /* see the background-position property */
}
body
{
background: url(...) no-repeat bottom;
}
you may want to switch one or both to use repeat-x, and make sure you set a suitable background color to match the color on the images.