Without extra markup, how can I add a background image to a div of a certain height and width (pulled from a sprite [multiple images put together]) while centering it vertically and horizontally? It's cake when it's a single image:
HTML:
<div id="blog">
<div class="circle"></div>
</div>
CSS:
#blog .circle {
background-image: url("../img/blog.png") no-repeat center;
}
I want to achieve the same effect using a single sprite for all of the images, while retaining the centering and defining a width and height which restrain the size of the background image.
background-image: url("../img/blog.png") no-repeat center center;
You should set the margin of the circle div to auto.
#blog .circle {
margin:auto auto; background-image: url("../img/blog.png") no-repeat center;
}
Set the margin to auto but also set the image width and height.
Example:
.btn_arrow_right {
background: url("../img/arrow_right.png") 0px -33px no-repeat;
width: 19px;
height: 33px;
margin: auto auto;
}
Related
I have the following code:-
.content {
width: 100%;
text-align: center;
overflow: hidden;
}
.expert-header {
position: relative;
width: 100%;
height: 565px;
display: block;
background-size: cover !important;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg);
}
<div class="content">
<div class="expert-header" style="background:url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg)" ;="">
</div>
</div>
What I want to achieve is:-
When you start shrinking the browser width from 1920px to 1170px it will cut off (crop) the left and right part of the image.
So if the browser width was at 1720px, essentially 100px will be removed from the left side of the image and 100px removed from the right but the image will retain the 565px height.
How can I achieve this?
I have made a JSFIDDLE of the code I have at the moment.
Use these settings for the background:
.expert-header {
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg) center center no-repeat;
background-size: auto 100%;
}
-> i.e. height 100% of parent element, width proportional to height (auto), centered in both directions (where only the horizontal centering is effective) and witout repeating.
Here's a fiddle: https://jsfiddle.net/q3m23Ly8/1/
(I also removed the style attribute from the HTML)
Remove the inline style of the div element because it will overwrite the CSS rules:
background-size: auto 100%;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg) center;
The important part is the background-size. auto 100% will tell the browser the background should always cover 100% of the height, the width will be calculated automatically.
Try below css for responsive:
Set the div height as per you needed.
.content {
width: 100%;
text-align: center;
overflow: hidden;
}
.expert-header {
position: relative;
width: 100%;
height: 250px /* Set height as per you needed */;
display: block;
background-size: 100% auto !important;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg);
background-repeat: no-repeat !important;
}
<div class="content">
<div class="expert-header" style="background:url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg)" ;="">
</div>
</div>
I have a JSFiddle here - https://jsfiddle.net/ow1x3e0a/14/
Simple CSS problem.
I have a header which I need to have an image on the side of. I can do this with a background image.
When the window is smaller I need to center the text and image so it appears in the center as it does on the left.
At the moment the text centers but the image stays on the left
I have tried it with without text-align but can't center it with margin: auto:
.container{
margin-top: 50px;
}
.header{
font-size: 20px;
padding-left: 110px;
background-image: url(http://placehold.it/100x50);
background-repeat: no-repeat;
}
#media only screen and (max-width:767px){
.header{
text-align: center;
}
}
When you are giving the background, you need to use:
background-position: center center;
The text-align: center or margin: auto are only for contents, not background.
Add background-position: center center (or shorthand background: url(...) center center;). Adjust padding to get it aligned how you want.
I'm trying to center an image inside a div, it gets close, but still is not really centered. The image is 976x976 px. The following is the CSS:
div {
margin-left: auto ;
margin-right: auto ;
border:1px solid #ccc;
max-width:976px;
height:976px;
min-width: 433px;
padding:0;
background: url("images/background.png") center center no-repeat;
}
The image must to be centered, but its exorbitant at the top and right, that is:
Looking at your provided URL I saw that positioning the background-image is indeed positioned more towards the top due to the fact the bgimage is larger than the div itself. Therefore you need to play with the percentages.
background: url("images/background.png") no-repeat 50% 18.5%;
Could solve your problem and place the image in the center of you div
Seems to be working fine??
Ive changed the order of your shorthand css and used 50% instead of center.
div {
position: absolute;
width: 100%;
height: 100%;
}
div {
margin-left: auto ;
margin-right: auto ;
border:11px solid red;
max-width:976px;
height:976px;
min-width: 433px;
padding:0;
background: url("http://lorempixel.com/output/fashion-q-c-976-976-4.jpg") no-repeat 50% 50%;
}
<div></div>
Your image on your link is a rectangular image with the circle at the top so isn't square.
Crop that image for your code to work!
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 have an issue with the background image for a header.
I'm creating a non-responsive website with a minimum width of 960px for the content area.
When the screen is 960px or larger, the background image in the header goes across the entire screen.
When the screen is smaller than 960px, the background image in the header starts to shrink to the left, leaving white space on the right side when you scroll to the right.
Is there a way to:
Not make the screen scroll so far that white space appears?
and/or
Make the background image appear as far across the screen as scrolling allows?
Here is my CSS:
header {
display: block; /* So that all browsers render it */
margin: 0 auto;
height: 300px;
background: url("http://upload.wikimedia.org/wikipedia/commons/5/51/Swallow_flying_drinking.jpg") no-repeat top center;
background-attachment: fixed;
}
.subWrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
padding: 50px 50px;
background-color:rgba(255,255,255,0.7);
}
And my HTML:
<body>
<header>
<div class="subWrapper">
</div>
</header>
</body>
Please see this JSfiddle for an example:
http://jsfiddle.net/QrMV4/2/
Thank you so much!
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
Demo Here
If I understand your question right...
Insert:
overflow:hidden;
In header
You need to replace the background-attachment: fixed to scroll and put width on header as you mean to have the header on center, replace the widt:960px of subWrapper to 860px on subwrapper and remove margin-left:auto and marging-right: auto...
You can have a look on jsFiddle to
http://jsfiddle.net/9YuW6/
header {
display: block; /* So that all browsers render it */
margin: 0 auto;
height: 300px;
width:960px;
background: url("http://upload.wikimedia.org/wikipedia/commons/5/51/Swallow_flying_drinking.jpg") no-repeat top center;
/*background-attachment: fixed;*/
}