I'd like to have an image (kind of logo) positioned in the bottom right corner of my page.
The page is very simple:
the <html> (in red in the drawings)
the <body>
the <header>
the div#content
The header is of fixed height. The #content can have very different height and it changes dynamically.
The CSS I use:
html: {
height: 100%;
}
body {
min-height: 100%;
position: relative;
width: 100%;
background-image:url('http://www.imagespourtoi.com/lesimages/mickey/image-mickey-3.jpg');
background-repeat:no-repeat;
background-size: 100px;
background-position: right bottom;
background-color: grey;
}
header {
width: 50%;
height: 180px;
}
#content {
width: 50%;
}
The HTML:
<html>
<body>
<header>
</header>
<div id="content">
</div>
</body>
</html>
On the left is what happened when the #content height is bigger than the screen, on the right when it's smaller.
The cloud in the drawing represents the background image. You can see on the left that it's displayed in the bottom right corner of the screen, not of the <body> (not the expected behavior).
What am I doing wrong?
NB: I can't reproduce such behavior on JSFiddle.
html tag requires a height declaration as well:
html { height: 100% }
Related
I have a simple HTML document (snip):
<html lang="en">
<body>
<div class="background"></div>
<header class="main-header">
<div>
<a href="../index.html" class="main-header__brand">
uHost
</a>
</div>
</header>
</div>
</body>
</html>
I noticed the following.
If I apply the following style:
background {
background: url('../images/macbook.jpeg');
position: fixed;
height: 100%;
z-index: -1;
width: 100%;
}
Then the background image covers the whole viewport as expected.
If I then add:
html {
margin-left: 10%;
margin-right: 10%;
}
The margin is correctly applied to the left and right of my content. But also to the left side only of the background. Ie:
I am confused as to why, as I thought fixed elements were positioned relative to the viewport? So why is a style on the html element influencing the rendering of the background?
As a solution to get what I wanted (some margin on both sides), I can do something like:
html {
width: 80vw;
margin: auto;
}
.background {
background: url('../images/macbook.jpeg');
position: fixed;
height: 100%;
z-index: -1;
width: 80vw;
}
Which produces:
But again, I'm unsure why the margin property on the html element is affecting my fixed background div?
When using position fixed, the element will still follow its natural initial placement, unless otherwise specified via the top left bottom or right attributes. Here you can see, even though the body element has a margin of 10px, the background element is still at the top left.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 10px;
}
h1 {
color: white;
text-align: center;
}
.background {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Solar_Eclipse_May_20%2C2012.jpg/1024px-Solar_Eclipse_May_20%2C2012.jpg");
width: 300px;
height: 300px;
background-size: cover;
z-index: -1;
position: fixed;
top: 0;
left: 0;
}
<body>
<div class="background">
<h1> Solar Eclipse </h1>
</div>
</body>
I am new to web design and for a class I am creating a site for a restaurant and I made my mockup but I am having issue (or maybe it's not possible) about having my image display as I do in my mockup (image to follow)
Here is the top of my mockup
I want to have the header 100% (figured that out)
the image 100% width
the image is 1480x808
and with this code it stays 100% width but the height isn't matching up with my next section (it either pushes it off the page entirely or in other resolutions has a big white gap between it and the next section)
Could someone point me in the right direction here?
Would really appreciate it
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#header {
height: 100px;
background-image: url(_images/headerpattern.jpg);
background-repeat: repeat;
}
#mainpicture {
height: 808px;
width: 100%;
max-height: 808px;
margin-left: auto;
margin-right: auto;
}
#redbar {
height: 10px;
width: 100%;
background-color: #94201f;
}
#slogan {
height: 207px;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="mainpicture"><img src="_images/mainpic.jpg" alt="" width="100%"/></div>
<div id="redbar"></div>
<div id="slogan">Content for id "slogan" Goes Here</div>
<div id="redbar"></div>
</div>
</body>
</html>
try removing the height and max-height property from #mainpicture
Update
For the red bar I'd remove them from your markup and use border-bottom on the first image and border-bottom on the second
Here's a fiddle
remove the height from #mainpicture.
or
if you need the height you can try putting the image in background of #mainpicture and set background size cover..Leave the #mainpicture div blank
like
<div id="mainpicture"></div>
css
#mainpicture {
height: 808px;
width: 100%;
max-height: 808px;
margin-left: auto;
margin-right: auto;
background-image:url(_images/mainpic.jpg);
background-position:center top;
background-size:cover;
}
If you want your page to be responsive, you must have some rules.
You want the image to show, as well as the slogan area. But the page can be seen in several devices, with several sizes.
So, you should use relative dimensions, so your goal can be achieved trought the many devices...
Place the image inside a div with relative dimensions...
Code:
<html>
<body>
<div id="header">
</div>
<div id"content">
Some random content
</div>
<div id="footer>
</div>
</body>
</html>
CSS:
html {
height: 100%;
}
body {
width:960px;
height: 100%;
margin: 0 auto;
}
#header {
height: 100px;
}
#content {
min-height: 100%;
}
#footer {
height: 100px;
position: relative;
bottom: 0;
}
Problem:
For what I have been reading, this code should do the height of the content div take all the height of the window even if the content it's smaller. The problem is that it makes it take more than the window height, even with a very small content.
I don't understand how the content can take more than 100% height and how can I fix it.
It's working fine, you're misunderstanding how it should work. You have header and footer set to 100px so the site is actually adding 200px to the entire page.
If that is a copy and paste you have html errors too, your content div is missing an= sign and the footer div is missing the closing "
What you want is a wrapper and position fixed on the footer not relative.
http://jsfiddle.net/calder12/ghDUd/1/
it take more than 100% because the header is having 100px as well, so the page has a 100%+100px total height, put the header inside the content wrap, that would be a quick-fix
Assuming proper code:
<html>
<head>
<style type="text/css">
html {
height: 100%;
}
body{
width:960px;
height: 100%;
margin: 0 auto;
}
#header{
height: 100px;
}
#content{
min-height: 100%;
}
#footer{
height: 100px;
position: relative;
bottom: 0;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="content">
Some random content
</div>
<div id="footer">
</div>
</body>
</html>
content div does have 100% of window height. That means it ends 100px (header's height) below window height. If you want footer to be always on the bottom, you should use position: fixed; bottom: 0 on footer.
I need to design a page with border images on each side. I need the page to fit on 1280x1024 and 1024x768 resolutions. Is it possible to have a fixed size for the center div and crop the border images in the lower resolution ?
1280x1024 : border-200px center-840px border-200px
1024x768 : border-72px center-840px border-72px
I've made two images with 200px X 5px. I've tried to use the float property without success.
So I've made it this way so far, it works in 1280x1024 but not in 1024x768 (it's too wide).
HTML :
<body>
<div id="right"></div>
<div id="left"></div>
<div id="center">
<h1>Title</h1>
<p>Content here</p>
</div>
</body>
CSS :
html {
margin: 0px;
padding: 0;
}
body {
margin: 0px;
padding: 0;
width: 100%;
background-color: white;
overflow: auto; /*to clear the floats*/
}
#right {
clear: both;
position: absolute;
right: 0;
background-image: url('/site_media/images/border-right.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}
#left {
clear: both;
position: absolute;
left: 0;
background-image: url('/site_media/images/border-left.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}
#center {
width: 840px;
margin: 0px auto;
padding-left:10px;
padding-right:10px;
}
Thank you!
since the center element if fixed-width, this should be easy. the side border should be placed as 'background' in the body instead of having its own div.
correct me if im wrong, based on what i understand here, you want the side border to be cut/crop by 1024 resolution instead of shrink. how about you make a single image with 1280 width, place both side border images in it accordingly, left and right, leave the center area empty. save this as a single image (up to you if you want a transparent background), then do the followings.
<style type="text/css">
body { /* can also use your own div */
background:url(path_to_the_single_image) repeat-y top center;
}
#center {
width:840px;
margin:0 auto; /* centered the div */
background:green;
}
</style>
<body>
<div id="center">center content</div>
</body>
thats it! now you should have your fixed width element in the center, and your side-borders in the background. if you load it in 1280, you should see the full border, while if you resize down to 1024, your centered element should remain there, and your side border just now should cropped out by the browser.
let me know if this is what you looking for.. :)
if I understand correctly - what you're looking for is a bit difficult to achieve without javascript.
You can consider a bit different approach that is: can the sidebars (graphic borders) slide under the center content?
example:
<style type="text/css">
#wrapper { position: relative; }
#right, #left { width: 200px; position: absolute; background: gray; }
#right { right: 0; }
#left { left: 0; }
#center { width: 840px; margin: 0 auto; background: green; position: relative; }
</style>
<body>
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
<div id="center">center</div>
</div>
</body>
Okey so basically I have:
<div id="content">
... content of arbitrary size ...
</div>
<div id="content_bottom"></div>
The style is:
#content {
background: transparent url(content_tile.png) center top repeat-y;
width: 800px;
}
#content_bottom {
background: transparent url(content_bottom.png) center top no-repeat;
height: 200px;
width: 800px;
}
content_tile.png is a 800x1 image (tiles vertically), and has transparency.
content_bottom.png is a 800x200 image.
Basically, I need to have the content_bottom.png image to replace the #content background image only on the bottom.
Having a negative margin on #content almost works, but since both images are transparent images, they overlap, and it should not happen.
I think that I need to make #content not to render its background on the last 200px on its bottom.
Any idea how I could do that ?
If you altered your markup slightly and used javascript you could do it with an absolutely positioned div that contained only the background. Then onload, set #repeating-background's height to (#content's height - 200px):
HTML
<div id="content">
<div id="text">
This is where your content would go
</div>
<div id="repeating-background"></div>
</div>
CSS
#content {
position: relative;
width: 800px;
background: url(content_bottom.png) left bottom no-repeat;
}
#text {
position: relative;
z-index: 2;
}
#repeating-background {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 800px;
height: 1px;
background: url(content_tile.png) left top repeat-y;
}
Javascript (jQuery)
$(document).ready(function() {
$('#repeating-background').height($('#content').height() - 200);
});
create a third div, nested in #content, that is 200px height.