I have a div and an image inside it as a background:
<div id="background">
<img src="background.png" class="stretch" alt="" />
<div class="header">
<span>header</span>
</div>
<div class="picture">
<img src="pic" alt="" />
</div>
</div>
And the following css:
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
.header {
position: absolute;
left: 12px;
top: 18px;
font-family: Arial;
font-size: 14pt;
color: #3A4549;
margin-bottom:
}
here's a fiddle: http://jsfiddle.net/3j7vk/
How can I add the image right under the header without specifying an absolute position?
Right now it goes under the background image. Thanks!
Is this what you're after?
http://jsfiddle.net/3j7vk/1/
Is there any reason you're not just adding the image as a background to the div?
#background {
background: url(background.png) no-repeat;
background-size: cover;
/*other rules*/
}
If the image is just a background, it shouldn't appear in the markup at all.
See this page on the background-size property.
It's odd that you're not using CSS's background-image property, but to answer your question, you can give elements z-index to specify their order and make them appear on top of each other. It only works when the position property is specified, but rather than making it absolute, make it relative:
.stretch {
width:100%;
height:100%;
position: relative;
z-index: 1;
}
Then give your .header a z-index of it's own:
z-index: 2;
But to be honest, using CSS's background properties would be the better option in my opinion.
Ok, if you want to use an img as your background you can do it like so:
<div id="background">
<img src="http://placekitten.com/g/600/600/" class="stretch" alt="" />
<div id="container">
<div class="header">
<span>header</span>
</div>
<div class="pic">
<img src="http://lorempixel.com/200/200/" alt="" />
</div>
</div>
</div>
css:
#container {
position:absolute;
top:0;
left:0;
}
#background, .stretch, #container {
width: 100%;
height: 100%;
}
.header {
font-family: Arial;
font-size: 14pt;
color: #3A4549;
margin-bottom:
}
.pic
{
height: 114px;
}
fiddle: http://jsfiddle.net/JKirchartz/SrvyD/
That way everything in your container flows like a plain html document and you don't have to position everything.
Related
I am trying to horizontally center images of any width. (In other words, each image has a width that falls in a range between 100px and 1000px). The parent area is 712px wide.
Most solutions I've tried center the images left side at the 50% mark.
This margin-left:50%; transform:translate(-50%,0); will position the element in the middle of its container. Even container is smaller than image:
div { width:100%; overflow-x:hidden; border:1px solid }
div > img { margin-left:50%; transform:translate(-50%,0); vertical-align:middle; }
<div>
<img src="http://lorempixel.com/400/200/">
</div>
<div>
<img src="http://lorempixel.com/1000/600/sports/3/">
</div>
img {
display: block;
margin: 0 auto;
}
or:
div.your-block-wrapper {
text-align: center;
}
div.your-block-wrapper img {
display: block;
}
.ct {
position: relative;
width: 700px;
height: 700px;
margin: 0 auto;
overflow: hidden;
}
.ct img {
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;
z-index: 22;
}
<div class="ct">
<img src="http://images.entertainment.ie/images_content/rectangle/620x372/success-kid.jpg" alt="" />
</div>
Check this out:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This apparently is something that's been floating around some of my dev friends that they've been adopting. I will likely start giving this a shot. It's still CSS, it's clean and no script required. You can also vertically center (and other stuff, as well).
You could do it like this:
https://jsfiddle.net/46mdr2z6/1/
<div class="wrapper">
<div>
<img src="http://placehold.it/250x110">
</div>
<div>
<img src="http://placehold.it/150x150">
</div>
<div>
<img src="http://placehold.it/650x250">
</div>
<div>
<img src="http://placehold.it/850x350">
</div>
<div>
<img src="http://placehold.it/120x750">
</div>
<div>
<img src="http://placehold.it/520x270">
</div>
</div>
css:
.wrapper {
width: 712px
}
.wrapper > div{
text-align: center;
}
img {
max-width: 100%;
}
I want to have a nice looking box AND a nice looking logo in that box (logos are for example purpose only).
BUT I don't know how to do that.
I have my image tag look like this
<img class="col-sm-12 pull-right" src="/marketing_materials/{{$marketing_material->id}}/download/thumb_path" alt="" />
If I include the width="200" height="200" in the <img> tag, my view will look like this.
I got a nice looking box, but ugly logo(stretch).
Else if I include the width="200" only in the <img> tag, my view will look like this.
I got a nice looking logo, but ugly box(doesn't line up).
Either way, I chose will screw up my view. :(
You could put your image in a 200x200 div and center your image (but not stretch it) inside it like this:
.imgbox{
border:solid 4px grey;
border-radius:5px;
width:200px;
height:200px;
display: table-cell; vertical-align: middle
}
<div class="imgbox">
<img src="http://img3.wikia.nocookie.net/__cb20100520131746/logopedia/images/5/5c/Google_logo.png">
</div>
Using the background-size property is the simplest way.
Read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
* { margin:0; padding:0 }
figure.logo {
width: 200px;
height: 200px;
background-image: url('http://i.imgur.com/F0RRqFy.jpg');
background-size: cover;
}
<figure class="logo"></figure>
Editable Demo: http://jsbin.com/gituzu/2/edit?html,css,output
you can center the images horizontal and vertical to the parent width and height by using position: absolute;:
HTML:
<div class="img_wrap">
<img src="https://pbs.twimg.com/profile_images/453545705622106112/6ERHbJBN.jpeg" />
</div>
<div class="img_wrap">
<img src="http://wottageek.com/wp-content/uploads/2014/10/Dropbox-Logo.png" />
</div>
<div class="img_wrap">
<img src="https://longren.io/wp-content/uploads/2014/04/do.png" />
</div>
CSS:
.img_wrap
{
width: 200px;
height: 200px;
position: relative;
float: left;
margin-right: 10px;
border: 5px solid #ccc;
}
.img_wrap img
{
max-width: 100%;
max-height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
example: http://jsfiddle.net/82bhzxfe/
I attached a drawing of what my page looks like. The page has a width of 980px and the image has a width of almost 1200px. What I want to achieve is to have the page centered and to show as much of the image as possible while also keeping the image centered. I tried to absolutely position the image but then on mobile devices the browser page is set to the width of the image and the content does not stay centered.
Basically, there could be screens where not the entire image is shown to the user but only as much as fits the screen.
CSS:
.page_container {
width: 980px;
margin: 0 auto;
}
.image {
position: absolute;
left: 0;
right: 0;
}
HTML:
<body>
<div class="page_container">...</div>
<div class="image"><img .../></div>
<div class="page_container">...</div>
</body>
pls use the position: relative for the image.like this:
<div class="page_container">...</div>
<div class="image"><img src="http://g.hiphotos.baidu.com/album/w%3D210%3Bq%3D75/sign=3584477cf636afc30e0c386483229af9/caef76094b36acaf18169c407dd98d1000e99c93.jpg" width=1200 height=200 /></div>
<div class="page_container">...</div>
css code:
.page_container {
width: 980px;
margin: 0 auto;
background: orange;
}
.image {
position: relative;
left: 50%;
margin-left: -600px;
}
the margin-left is equal to the img's width/2. pls view the demo.
You Can Try This
<div class="popup">
<div class="wrapper">
<img src="http://farm4.staticflickr.com/3721/8826906676_501192b1c4.jpg">
</div>
</div>
CSS:
.popup{
position:fixed;
left:50%;
}
.popup .wrapper{
position:relative;
left:-50%;
/*popup-styles*/
background-color:#fff;
padding:10px;
border:solid 2px #444;
border-radius:10px;
}
html{background-color:#aaa;}
Example : jsfiddle
by Elad Shechter
.image {
position:absolute;
left:50%;
margin-left:-600px; // half of image width
}
You can try this way:
HTML:
<div class="wrapper">
<div class="image">
<img src="img/img.jpg">
</div>
</div>
JS:
<script>
$(document).ready(function() {
$('div.image').each(function() {
var imageSrc = $(this).find('img').attr('src');
$(this).css('background', 'url(' + imageSrc + ') center top no-repeat');
});
});
</script>
CSS:
.wrapper {
float: left;
width: 100%;
overflow: hidden;
}
.wrapper .image img {
visibility: hidden;
}
Easy way to center <img /> tag.
body {
margin: 0;
}
.warpper img {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover
}
<div class="warpper">
<img src="https://i.stack.imgur.com/gkOwi.jpg" />
</div>
How about this: https://jsfiddle.net/squadjot/hva34oju/
HTML:
<div id="imgwrap">
<img src="https://i.stack.imgur.com/gkOwi.jpg">
</div>
CSS:
#imgwrap {
text-align:center;
}
#imgwrap img {
margin:0 -1000%; /* don't ask :P */
}
Works in every browser i've tried. IE, Chrome, Opera, FF
background-size:auto;
set this property for your image
Try this:-
.image {
position: absolute;
left: -50%;
}
I think it will work for bigger images...
.image {
position: absolute;
left: -50%; }
From my understanding you can use absolute positioning inside of it's parent to place it exactly where ever you want. Like explained here: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I'm trying to get my img elements to sit on the bottom of their parent divs but when I give the img's an absolute position the layout breaks. It seems like I need to assign a height to the section or the divs but nothing seems to work.
Please note that I commented out the absolute positioning on the images in the css so the layout is more presentable
<head>
</head>
<body>
<section id="artImages">
<div id="artImage1">
<img src="http://placekitten.com/288/200" alt="" />
</div>
<div id="artImage2">
<img src="http://placekitten.com/144/160" alt="" />
</div>
<div id="artImage3">
<img src="http://placekitten.com/673/300" alt="" />
</div>
</section>
</body>
CSS:
section {
margin: 100 auto;
}
section#artImages {
width: 673px;
height: auto;
position: relative;
display: block;
}
section#artImages div {
float: right;
height: auto;
position: relative;
}
div#artImage1 {
width: 288px;
}
div#artImage2 {
width: 144px;
}
section#artImages div img {
width: 100%;
/* position: absolute; */
bottom: 0;
}
Here is my jsfiddle http://jsfiddle.net/PsMff/ Below is an illustration of what I'm looking for.
You are correct ... the divs need to have some hight assigned, if you want to keep the current html markup.
Note: you also don't need to use the html elements' tag-names in combination with ids (e.g. div#artImage1), as one id can only refer to one specific element in the markup.
You could try something like this (jsfiddle), I gave the divs hight: 300px:
section {display: block}
#artImages {
margin: 0 auto;
width: 673px;
}
#artImages div {
position:relative;
float:right;
height:300px;
}
#artImage1 {
width: 288px;
}
#artImage2 {
width: 144px;
}
#artImage3 {
position:relative;
width:100%;
background-color:blue;
}
#artImages div img {
position:absolute;
width: 100%;
bottom: 0;
}
Another option:
If you don't want to assign a height to the divs, but rather have it adjust to the higher one of them,
wrap another container around the upper two divs. Here I added the #floater div to your markup:
<section id="artImages">
<div id="floater">
<div id="artImage2">
<img src="http://placekitten.com/144/160" alt="" />
</div>
<div id="artImage1">
<img src="http://placekitten.com/288/200" alt="" />
</div>
</div>
<div id="artImage3">
<img src="http://placekitten.com/673/300" alt="" />
</div>
</section>
and now float right the #floater and use display:inline-block; on #artImage1 and #artImage2 and bottom:0; on images. Something like this:
section {display: block}
#artImages {
margin: 0 auto;
width: 673px;
}
#floater, #artImage3 {
float:right;
}
#artImage1, #artImage2 {
display:inline-block;
width: 288px;
}
#artImage2 { width: 144px }
#artImage3 { width: 100% }
#artImages img {
width: 100%;
bottom: 0;
}
jsfiddle example
Use class attribute in place of id, then add the following code
position : relative;
bottom : 0px;
clear : both;
I've got a question regarding positioning of two objects: image and div. I want bg2.png image to stay under div. I keep encountering problem with image pushing div down by img's height. How do I avoid that?
I tried pushing down image with "top:" value but of course it leaves me with empty area above div. Also I tried adding negative "top:" value and relative position to "maincontent" div but again it left me with empty area, only difference was that this time it was under the div.
HTML:
<body>
<img src="./images/bg2.png" class="bgimg" />
<div id="maincontent">
</div>
</body>
CSS:
body {
width: 100%;
background: #000;
}
.bgimg {
z-index: -1;
overflow: hidden;
left: 70px;
position: relative;
display: block;
}
#maincontent {
height: 520px;
width: 960px;
margin: 20px auto;
display: block;
z-index: 8;
}
Thanks in advance.
edit - what I'm trying to achieve:
Click me!
2 solutions:
Change your HTML structure:
<body>
<div id="maincontent">
</div>
<img src="./images/bg2.png" class="bgimg" alt="some">
</body>
or make it as the background-image:
<body>
<div id="maincontent">
</div>
</body>
#maincontent {
background: url(./images/bg2.png) no-repeat 0 100%;
padding-bottom: height_of_image_in_px;
}
<style>
body {
width: 100%;
background: #000;
}
.bgimg {
z-index: -1;
overflow: hidden;
left: 70px;
position: relative;
display: block;
}
#maincontent {
height: 520px;
width: 960px;
margin: 20px auto;
display: block;
z-index: 8;
}
</style>
<body>
<div id="maincontent">
<img src="./images/bg2.png" class="bgimg" alt="some info about image here">
</div>
</body>
if you want that image inside the div use this code. or if you want make that image background of that div use css background property