first off here's my current code.
<div id="background">
<img src="src/1080pTux.png" height=100%>
</div>
#background{
position:fixed;
margin-left:auto;
margin-right:auto;
z-index: -5000;
}
The image stays fit to height, maintains aspect ratio, and stays behind everything, but i want it positioned centered at all times. How can I accomplish that and what am I doing wrong?
Thanks!
You may want to use background-image.
You could try somthing like this:
body {
text-align: center;
min-width: 600px;
}
Even though it says text align it will align the whole page in the center since your modifying the whole body to be centered.
Related
I'm trying to fit a fixed background image properly into a div.
I want the image to
have its left edge be positioned on the divs left edge, even if the div is positioned with margin auto
have a width of exactly the divs size
Both points are problematic.
100% background-size seems to relate to the images original size and not to the div-size. Maybe contain is the correct thing here, but I can't verify that without a solution to problem no 2.
The background-position seems to relate to the complete browser viewport and not to the div.
I have made the image have a proper dimension, so that it should be high enough to cover the visible area when being scrolled over.
Here is a jfiddle: https://jsfiddle.net/417u343f/3/
As you can see, the image is starting more to the left than the start of the div and because of that, it's repeating before the div is at its end.
Thanks for any help, I hope I made my problem clear enough.
<div class="outer">
<div class="test">
<div class="test1">
</div>
<div class="test2">
Text...
</div>
</div>
</div>
css:
div.test {
width: 80%;
margin-left: auto;
margin-right: auto;
height: 250px;
}
div.test1 {
width: 50%;
height:100%;
float:left;
background-image: url('image...');
background-attachment: fixed;
background-size: contain;
}
div.test2 {
width:50%;
float:left;
}
The following layout 2 column layout will get screwed up by adding the <p>Hello</p>... Can anyone give me a clue?
<div style="width:1280px; font-size:0;">
<div style="width:640px; height:200px; background:blue; display:inline-block;">
<p>Hello</p>
</div>
<div style="width:640px; height:200px; background:yellow; display:inline-block"></div>
</div>
I could see if the height of the "p" was actually larger than 200px, but it isn't. So why doesn't it just go inside of its parent and stop messing with my layout?
To fix this, I ended up making the layout column divs relative, and using the absolute position on a child div that would be the container of the "p", but it seems like there is something obvious I am missing to make this situation simpler...
Inline-block does leave some whitespace that is undesired most of the time do to spaces in your code. The best solution I think is to float it and use 50% for the width.
div {
float: right;
width: 50%;
height: 200px;
background:blue;
}
the p tag will go in nicely.
example here on jsfiddle
other solutions and information here http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Inline block items are vertically aligned as baseline by default. Add vertical-align:top
Jsfiddle Demo
div {
font-size:0; /* remove whitespace */
}
div div {
font-size:1rem; /* reset font-size*/
vertical-align: top;
}
I have an issue with an absolute positioned DIV. Its positioned to the right of an image, and underneath it is another DIV. On fullscreen, it looks fine, but when I resize my browser window, the text goes into the bottom DIV. I just want the browser to make a scrollbar so the text can continue horizontally. Here is my issue on Jfiddle:
http://jsfiddle.net/9hpVT/
You have to resize the width of the browser to see the problem
HTML
<div>
<div id="d1">
<img src="abc.jpg" />
</div>
<div id="d2">Here is a long line of text that will overlap the bottom portion I do not want it to do this because it is very bad for my design. Someone please help me out!</div>
<div id="d3">I don't want to be interrupted!</div>
</div>
CSS
#d1 {
left:0;
top:0;
}
#d2 {
position:absolute;
left:50px;
top:0px;
}
This happens because the position is absolute.
I would use float instead of positioning for this. See my Fiddle.
#d1 {
float: left;
}
#d2 {
margin-left: 50px;
}
FIDDLE DEMO
You dont need to do anything with #d2,#d3 . All you have to do is apply float:left to the d1 that contains the image !
In CSS, how can I make a div as high as the entire page?
I want to make that div occupy the whole space of the webpage and put a background image in it.
SAMPLE FIDDLE: http://jsfiddle.net/apTFp/
div{
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
background-color:#eeeeee;
}
This should work :)
You can do
#mainContainer {
width: 100%;
height: 100%;
background: url('imagePath'); //you can add a repeat or no repeat here
}
Hope it helps or somewhat you can style the body so that you will not specify the width and the height anymore, just the background image.
Do not need a div in the first place
Try
<body style="position: relative; margin: 0; background-color: Blue;">
<p>
Hello
</p>
</body>
Of course change background-color to background image
Try
<div id="foo"></div>
<script>
$("#foo").css("width", screen.width);
$("#foo").css("height", screen.height);
</script>
Another solution would be using the unit vh. 1 vh equals to 1% of the total viewport height. If you wanna learn more about units, you can checkout this article.
To make the div as high as the entire viewport, simply set height to 100vh.
div {
height: 100vh;
}
I have such structure (divs):
#content-wrapper->
#left
#center
#right
#footer
#footer
{
position: relative;
}
#content-wrapper
{
position: relative;
clear: both;
overflow: hidden;
width: 100%;
height: 100%;
min-height: 300px;
}
But when text in #center div is bigger, than min-height, it becomes over the #footer. What's wrong?
UPD:
Example address: link
Thanks for providing the content. It looks like this problem is happening because #content-center has a fixed height of 200px. Get rid of this (and the fixed height for #content-left and #content-right unless you have a really good reason to keep it), or change it to min-height instead, and the footer should show up below the content as expected.
You'll still run into some problems if #content-left or #content-right is the longest column. To deal with that, you could remove the footer from the #content-wrapper div -- set your structure up like this:
<div id="content-wrapper">
<div id="content-left"></div>
<div id="content-right"></div>
<div id="content-center"></div>
</div>
<div id="footer"></div>
Let me know if that doesn't work for you.
you need a new item. a clearer wich clears the floating inside the main div
you dont need any of position:relative
you dont need any of the clear:both
but you need a new item inside the content-wrapper
this.
thats all.
floated divs like a points. they not affect the size of a div or the width
another nice solution to use the table stuff:
CSS 100% width in floated div
this is not really the answer, but i prefer you to use table displayed divs, and they can be resized, placed better than only floated divs.