I got a little problem when trying to position my image, it does not show as i wanted, and i have been looking for at answer for a few hours. I want my picture to be shown were the arrows points:
I want this image to be at 100% width, i just cannot make it appear like I want to. The closet I can compare it to look like is the facebook cover picture (Menus at top, a big image and some small soundclouds and facebook like i already have ;) ).
And sorry for my English :s
---- My html (Sorry if its un-readable, i will copy and upload everything on request) ----
<html>
<head>
<link rel="stylesheet" id="default-css" href="default.css" type="text/css" media="all">
</head>
<div id="cover-image" class="clearfix"></div>
<footer id="site-footer">
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F83233916"></iframe>
<object height="81" width="100%">
<param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F83233916&show_comments=true&auto_play=false&color=343538&theme_color=343538&show_user=true&show_bmp=true&show_artwork=true&show_bmp=true"></param>
<param name="allowscriptaccess" value="transparent"></param>
<embed allowscriptaccess="always" height="81" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F83233916&show_comments=true&auto_play=false&color=343538&theme_color=34353&show_user=true&show_bmp=true&show_artwork=true&show_bmp=true"
type="application/x-shockwave-flash" width="100%"></embed>
</object>
- Control areal -
<div class="plugin_example" id="u_0_9"><div data-href="http://www.facebook.com/DjSalling"data-send="true" data-show-faces="true" data-colorscheme="dark" class="fb-like >dark_background fb_edge_widget_with_comment fb_iframe_widget" fb-xfbml->state="rendered><span width="100%" height="61"><iframe id="f30076c07" name="f2303a14a8" scrolling="no" style="border: none; overflow: hidden; height: 61px; width: 100%;" title="Like this content on Facebook." class="fb_ltr" src="http://www.facebook.com/plugins/like.php?api_key=113869198637480&locale=da_DK&sdk=joey&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D22%23cb%3Df20c4c7538%26origin%3Dhttp%253A%252F%252Fdevelopers.facebook.com%252Ff5cc88ac%26domain%3Ddevelopers.facebook.com%26relation%3Dparent.parent&href=http%3A%2F%2Fwww.facebook.com%2FDjSalling&node_type=link&width=450&layout=standard&colorscheme=dark&show_faces=true&send=true
&extended_social_context=false"></iframe></span></div></div>
</footer>
</body>
</html>
---- CSS ----
#cover-image {
background-image: url(background_cover.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#site-footer { position: relative;
position: absolute: bottom;
background: url(footer-divider.png) center top no-repeat;
background-size: 100%;
margin: 0px 0 200px 0;
padding: 27px 0 0;
clear: both;
}
#inner-footer {
position: absolute;
bottom: 0;
left: 0;
}
#inner-footer .content {
color: #bcbcbc;
background: #272729;
background: rgba(0,0,0, 0.15);
background-repeat: no-repeat;
padding: 10px;
height: 72px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
Thanks everyone :)
EDITS:
#3rror404 Thanks, but i what the width to be at 100% so the images scaling moves at the size of your browser and automaticly downscales from lets say 2560x1600?
#cover-image {
width: 100%;
height: 400px;
background-image: url(background_cover.jpg);
background-repeat: no-repeat;
background-position: left top;
Now height is at 400xp but not even close to be able to view the whole picture
As you can see here the width works, the height just doesn't
#Kamal I used your css, but when i drag my browser window back and forth i can see the image just gets cut off, and in a narrow browser window there is a big space from the soundcloud to the picture.
I am not exactly sure that i followed your problem.. but do you mean that the image ,that you are setting as background property should scale to the width of container??
#cover-image {
width: 100%;
height: 400px;
background-image: url(background_cover.jpg);
background-repeat: no-repeat;
background-size:100%;
background-position: left top;
should fit your background image width to container width.. is this what you are looking for ?
If I understand the question correctly you want background-size: cover
#cover-image {
height: 400px;
background: url(background_cover.jpg) center center;
background-size: cover;
}
This will force your background image to cover the entire container whilst maintaining aspect ratio and staying horizontally and vertically centered.
DEMO (Resize your browser)
EDIT
OK, if you don't care about maintining aspect ratio use background-size: 100% 100%
#cover-image {
height: 400px;
background: url(background_cover.jpg);
background-size: 100% 100%;
}
This will scale your background image to 100% of the height and 100% width of the container even if that means stretching or squashing the image.
DEMO
Related
I'm setting up a site, and want to create a responsive background image but I'm getting only single line with background image. What property should i need to use to make the entire background image to fit?
I created 2 files,
index.html :
<div id="logo">Test</div>
style.css :
#logo {
background-image: url("bg.png");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
I tried many times but only single line gets background image. I want the background image to be fully displayed on screen without using height property which i think makes site less responsive.
you should change the height of logo div and set it as full height by adding height:100% for the body and logo div, your code should look like below code
html, body
{
height: 100%;
}
#logo {
background-image: url("bg.png");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height:100%;
}
If you want the image to have the same height as the screen you can use height:100vh. But if you want only the image full size you can do this like this :
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#image{
max-height: 100%;
max-width: 100%;
}
#text{
position: absolute;
color: white;
top: 0
}
<img id="image" src="https://images.unsplash.com/photo-1528920304568-7aa06b3dda8b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
<div id="text">test</div>
So, in my previous post I was asking how I can diplay a 500x500 image, with that image to only be resized towards the x axis and not y.
.image {
border: 1px solid blue;
background-image: url('http://www.seedsavers.org/site/img/SEO%20Images/0841-benarys-giant-zinnia-flower.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: contain;
width: auto;
height: 500px;
max-width: 100%;
}
I use border to understand a bit better the borders of the image. I tested this and works fine except for the fact that when I resize it towards the x axis it's indeed resized but it gives a blank area at the bottom:
How can I fix this so no blank bottom area appears, the border to fit always the image? Ty
The width of your container is not 500px, so therefore the background image is being reduced in height to maintain its aspect ratio. If you would like to entirely fill the <div>, you can use background-size: cover, as follows:
.image {
border: 1px solid blue;
background-image: url('http://www.seedsavers.org/site/img/SEO%20Images/0841-benarys-giant-zinnia-flower.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
width: auto;
height: 500px;
max-width: 100%;
}
<div class="image"></div>
Perhaps use img tag and make this img responsive? here is my solution:
https://jsfiddle.net/7rwp5jf4/
Html:
<div>
<img src="http://www.seedsavers.org/site/img/SEO%20Images/0841-benarys-giant-zinnia-flower.jpg">
</div>
Css:
DIV {
border: 1px solid blue;
width: auto;
height: 500px;
max-width: 100%;
}
div img{
width:100%;
height:auto;
}
I at least got the following to render the image, but when the window is resized past a certain point: part of the image gets cut off.
#header {
background-image: image-url('my_header.png'); #image-url is a helper in rails
background-repeat: no-repeat;
height: 100px;
background-size: 100%;
border-radius: 1em;
}
And then showing how I specify the image at the top of the body in application.html.erb:
<body>
<div id="header"></div>
</body>
What I want to happen is for the image to scale proportionality but not get cut off. I do not want any specific height set. I want it to automatically scale as needed (however, I wasn't able to get the image to render unless I specified the height with px).
#Pangloss deserves recognition for providing a fantastic answer at this jsfiddle which he referenced in the comments.
Here is his css:
#header {
background-image: url('http://i.imgur.com/zOZVQaf.jpg');
background-repeat: no-repeat;
background-size: contain;
border-radius: 1em;
border: 1px solid blue;
}
#header img {
display: block;
visibility: hidden; /*hidden but reserve the space*/
width: 100%;
height: auto;
}
And the html:
<div id="header">
<img src="http://i.imgur.com/zOZVQaf.jpg">
</div>
#Pangloss provided this answer in the comments. If/when he posts an answer to this question, I will switch it over to his answer.
I have a span with a background where I want the image resized without loosing the radio. I mean not stretching. My image disappear when I use height: auto;
#logo_span{
display: inline;
background-image: url("../gfx/hs_logo.png");
margin: -5px auto auto -100%; /* margin top right bottom left */
background-size: 50% 50%;
background-repeat: no-repeat;
width: 90%;
height: auto;
}
You will need to set the height to an integer or percentage like so:
#logo_span{
display: inline;
background-image: url("../gfx/hs_logo.png");
margin: -5px auto auto -100%; /* margin top right bottom left */
background-size: 50% 50%;
background-repeat: no-repeat;
width: 90%;
height: 250px;
}
Another way would be to place an <img> inside this div but have another div with the same properties but instead of have an img have the background-image. However this is considered messy and can slow down loading speeds as your loading 2 of the same image.
<div class="hiddendiv">
<img src="//file src">
<div class="visiblediv"></div>
</div>
<style>
.hiddendiv img{height:200px; width:500px;}
.visiblediv {height:200px; width:500px; margin-top:-200px; background-image:url(//path to your image);}
</style>
This is just a rough example but this has worked for me in the past, no matter how much im not a fan of this method.
If you want responsive image use <img/> tag instead css background-image. And then in css use width: 90%; height: auto;
I want to center an image on top of my background image.
#home is the background image that stretches to the size of the browser
#hometitle is the image i want on top
I would like to center #hometitle on top of my #home background so no matter the size of the browser, it'll be spaced into the center of the background image.
I have tried margin: 0 auto; and then margin-top: 250px; right after, but that just creates a white gap above the entire background image of 250px;
Position: absolute; and top/left don't really help because the position will be static and not be center as you resize the browser.
#home {
height: 1000px;
margin: 0 auto;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url("images/bigheader.png");
}
#hometitle {
background-image:url(images/title.png);
height: 260px;
width: 435px;
}
HTML:
<div id="home">
<div id="hometitle">
</div>
</div>
#hometitle {
background-image:url(images/title.png);
height: 260px;
width: 435px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -130px;
margin-left: -217px;
}
This should do since we postion the home title image absolutely at the center of the browser rendering space.
If you are having some issues with the position of image add
body {position: relative;}
This is one of the easiest and best techniques to position an element at the center that i use often
You can't use margin-top to move the <div id="hometitle"> down relative to the <div id="home"> because of margin collapsing, but you could add top padding on the <div id="home"> instead.