I'm trying to use a <img> tag to show a photo over another div, as some sort of overlay. However, the image won't scale to be inside of it's parent div (which is the body of the page). Instead it overflows the body. When I set overflow: hidden; to the body, you can't scroll over the page. I want the image to be full-height and fitted within the body (without enlarging the body).
This is basically the structure of the page:
<html>
<body>
<div class="imgContainer">
<img class="actualImage" />
</div>
<div class="restOfBody">
</div>
</body>
</html>
And the css:
body {
background-image: url(*some background photo*)
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding: 0;
margin: 0;
max-height: 100%;
}
.imgContainer {
z-index: 2;
position: absolute;
top: 0;
left: 0;
max-height: inherit;
}
.actualImage {
max-height: 100%;
}
This is basically what is happening now:
The image that is drawn over the text right now, pushes the page down so far, that it actually exceeds the body of the html.
height in % will not work till you will use meta for height,
ok please use overflow:hidden at the place of overflow:none
make your image as background-image. I think it would be better.
Add a container in your body as shown,
<body>
<div class="container">
<div class="imgContainer">
<img class="actualImage" src="banner.jpg">
</div>
</div>
</body>
and do this in css
.container {
width: 200px;/*sample width*/
height: 200px;/*sample height*/
overflow: hidden;
}
.imgContainer {
position: relative;
top: 0;
left: 0;
max-height: inherit;
}
The .container is responsible for setting a boundary and by using overflow: hidden, prevent content inside .container to overlap. While in the case of .imgContainer make sure the position is relative to container, absolute will pull itself out the flow, which is not safe in your case.
Related
I would like to position the image inside the header. Currently, the top portion of the image is displayed and I want to display the middle part of the image. The top attribute makes the image clip over the parent's box. Please take a look at my code.
HTML:
<body>
<header class="header">
<div class="header-inner">
</div>
</header>
</body>
CSS:
.header {
position: relative;
width: 100%;
height: 20%;
background-color: grey;
}
.header-inner {
position: absolute;
background-image: url(../images/img.jpg);
width: 100%;
height: 100%;
}
If you want to display the middle part of the image you could use background-position on .header-inner. You can specify a custom percentage or simply center it.
background-position: center;
If you set position: absolute then block will be over the others. So just set z-index: -1; to .header-inner
I'm trying to make a full width and height responsive home page with an image. The problem I'm encountering are padding issues. I cannot get padding to work when I display an image in css under 'background-image: url();'. The only thing that works is the margin property but it is not responsive to the height and only shows the top and the rest as I scroll down but I am trying to have the padding be responsive to the resizing of the height of the page. To show you guys more of what I am trying to achieve, I included 2 examples, the top with what I want and the second with the problem I'm facing. I've managed to get responsive padding to work while I place the img tag in my HTML but I cannot do so with the background-image property as I'm trying to put text on it.
.test img{
width: 100%;
max-width: 100%;
height: 100vh;
padding: 10px;
}
.wrapper {
background-image: url(https://images4.alphacoders.com/432/43258.jpg);
height: 100vh;
width: 100%;
max-width: 100%;
background-size: cover;
background-position: center center;
}
<div class="test">
<img src="https://images4.alphacoders.com/432/43258.jpg" alt="">
</div>
<div class="main">
<div class="wrapper"></div>
</div>
https://jsfiddle.net/u9t4hqqq/
You can use margin, you just need to account for the vertical margin that will push your 100vh height out of 100vh, and you can do that with calc()
body {margin:0;}
div {
margin: 10px;
background: url('http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg') center top no-repeat / cover;
height: calc(100vh - 20px);
}
<div></div>
Or you can wrap the element in another element, apply padding to the outer element, and use border-box to keep the padding inside of 100vh.
body {margin:0;}
section {
height: 100vh;
box-sizing: border-box;
padding: 10px;
}
div {
background: url('http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg') center top no-repeat / cover;
height: 100%;
}
<section><div></div></section>
Padding does work, but you can't see it. If you put content within the div, you'd see the effects of any padding. What you want is to apply the padding to the parent, in this case .main. Padding by definition can not impact the background of the element it's applied to but rather where children sit in relation to the element's borders.
If that is somehow insufficient, you can simulate the look with box-sizing: border-box and use a 10px border that matches the body background.
Which raises the point that you may want to review the box model to learn better what margin and padding are and how they relate to elements:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
madrougebeauty.com uses a "frame" that is layed on top of all elements; it has nothing to do with padding.
To achieve something like it, look at the following:
.wrapper {
background-image: url(https://images4.alphacoders.com/432/43258.jpg);
background-size: cover;
background-position: center center;
height: auto;
min-height: 100vh;
color: #fff;
box-sizing: border-box;
/* Give your content padding so nothing gets hidden under the frame */
padding: 2em;
}
.frame {
position: fixed;
z-index: 9999;
background-color: yellow;
}
.top, .bottom {
width: 100%;
height: 10px;
left: 0;
}
.left, .right {
width: 10px;
height: 100vh;
top: 0;
}
.top {
top: 0;
}
.right {
right: 0;
left: auto;
}
.bottom {
bottom: 0;
top: auto;
}
.left {
left: 0;
}
<!-- These 4 elements build a frame on top of the screen -->
<div class="frame top"></div>
<div class="frame right"></div>
<div class="frame bottom"></div>
<div class="frame left"></div>
<div class="wrapper">
<h1>Headline</h1>
<p>Your content here.</p>
</div>
this seems very weird to me. I have a full sized image and at the bottom of the image I want to insert contents and the title. but thing is my image covers up the contents and the title. Using page source, I have realized the image covers up my contents. How do I let the contents out of the image, without affecting the size of the image? I tried hr and br but both won't work.
div class="row">
<div class='col-sm-8 col-sm-offset-2'>
<img src="{{ news.get_image_url }}" class="className" >
<br />
<h1>{{news.content}}</h1>
</div>
</div>
.className {
max-width: 100%;
max-height: 100%;
bottom: 0;
left: 0;
margin: auto;
overflow: auto;
position: fixed;
right: 0;
top: 0;
}
You using fixed position which cause your image cover the text and it will be always in the same position even if you scrolled down
try get rid of this like
.className {
max-width: 100%;
max-height: 100%;
bottom: 0;
left: 0;
margin: auto;
overflow: auto;
position: relative;
display:block;
}
see fiddle demo
It's because you use position fixed.
You can fix this by giving the h1-tag a top-margin evenly large as the image.
I'm just working on a simple HTML page but still struggling with the divs.
The plan is: a fullscreen background and four horizontal buttons next to each other on the bottom. The buttons are currently mapped to the background image - so I could just add four invisible layers (divs) with some hrefs for example. Otherwise I would add them manually (in four single jpgs) to the bottom...
Howsoever, I want the whole site to (borderlessly) scale up and down to variable screen resolutions. Therefore also the sizes of the divs/images should scale equally and keep its position.
What I've got so far:
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
img {
height: auto;
width: auto;
min-width: 100%;
min-height: 100%;
}
<body>
<div class="background">
<div class="img">
<img src="background.jpg">
</div>
</div>
</body>
At this point I only have the background set up: its in an img-div within a background container with absolute positioning.
How could I add the four buttons now to stick at the bottom of the background a keep its relative size and position when the screen resolution changes?
:)
Take the button images out of the background image, set the body rules as follows (with background-image), add a div at the bottom and put the buttons in there (I chose DIVs with background-images for the buttons, but of course you can also use <button> tags. Adjust the "bottom" and button heights and the button margins as needed:
CSS
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: url(background.jpg) center center fixed;
background-size: cover
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
height: 50px;
width: 100%;
text-align: center;
}
.button {
display: inline-block;
width: 80px;
height: 50px;
margin: 10px;
}
.button1 {
background: url(button1.jpg) center center fixed;
background-size: cover
}
.button2 {
background: url(button2.jpg) center center fixed;
background-size: cover
}
.button3 {
background: url(button3.jpg) center center fixed;
background-size: cover
}
.button4 {
background: url(button4.jpg) center center fixed;
background-size: cover
}
HTML:
<body>
<div class="content">
(your content)
</div>
<div class="bottom">
<div class="button button1">(button text 1...)</div>
<div class="button button2">(button text 2...)</div>
<div class="button button3">(button text 3...)</div>
<div class="button button4">(button text 4...)</div>
</div>
</body>
Thanks for the quick help!
The code looks good so far. But I still have the problem that the buttons change its size when I rise or decrease the screen resolution. Is there a way to give them fixed sizes in relation to the whole screen? "buttonX" should always have x% of the screens width and x% of its height... And I don't want the actual visible positioning resp. margin to change when the resolution changes :/
But many thanks so for!
I am trying to get a image to fill up the viewport and auto resize when the browser gets resized, which is working, the only problem is that for some reason I can't get the image to NOT extend outside of the #wrapper element, even though it has overflow set to hidden, I am assuming it is because I am using percentages instead of a fixed width and height?
Now when I put overflow: hidden; on the body element it works, but then when you select text anywhere on the page and drag down, it scrolls down to the bottom of the image, which is problematic as I have a footer menu that is absolutely positioned to the bottom of the screen, which then moves up with the image as it is dragged down, and ruins the whole effect.
So basically I just want to have a auto resizing background, that doesn't overflow the viewport and cause scrollbars, and that allows your positioned content to stay where it is and not scroll up when you drag down on selected text.
HTML:
<html>
<head>
<title>project</title>
</head>
<body>
<div id="wrapper">
<div id="content">
<img src="image.jpg" width="1400" height="1200" />
</div>
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#content {
width: 100%;
height: 100%;
}
#wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
I know this is an old post, but for the benefit of others, since position:fixed isn't the most compatible way either, changing your #wrapper element to have position:relative; solves the problem.
Thanks,
Scott
Ok, got it working, I changed this
#wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
to this
#wrapper img {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
so as you can see, all I changed was the position property, from absolute to fixed, and that did the trick. :)
Use CSS backgrounds instead of html img elements. You can use background-size to resize the image.