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.
Related
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 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;*/
}
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;
}
I am having trouble with centering a background behind a div. I have made a fiddle showing how the background image stays center whilst the browser window is resized, which is great, but if the scrollbar is moved down so to view the bottom of the green div, the back ground follows the scroll, so is no long centered, which I am trying to avoid. I hope for the center text of the bk-gnd image to remain central in the view port at all times, whether resizing the screen or scrolling, is this possible?
here is the interactive fiddle : http://jsfiddle.net/4fM2n/
CSS
html, body {
height: 100%;
margin: auto;
}
#bk-gnd-div {
height: 100%;
background-image: url('http://oi58.tinypic.com/5an82h.jpg');
margin: auto;
background-repeat: no-repeat;
background-position: center center;
background-color: #9FBBE2;
}
the other div code is on the fiddle, stackoverflow is saying it is not formatted correctly and wont let me post it? maybe this is a clue?
add css
*{
margin: 0;
padding: 0;
}
#bk-gnd-div {
margin: 0 auto;
width: 100%;
}
or image fixed center
body {
width: 100%;
height: 100%;
background-image:url('http://oi58.tinypic.com/5an82h.jpg');
margin:0 auto;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
I've got this logo I'm trying to use on a responsive site, but I can't figure out how to have it so it fills the full width of its parent element while maintaining its ratio in height.
When you start resizing the browser window, the logo gets smaller in width but its height doesn't scale properly. Is there a way to maintain this.
Here's my CSS for the logo element:
h1 {
width: 100%;
height: auto;
background: url(http://images.uncyclomedia.co/uncyclopedia/en/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png) no-repeat top left orange;
background-size: contain;
text-indent: -999999px;
text-align: center;
margin-top: 270px;
}
This is the problem I'm having. Look at all that extra space below the
logo.
And here's a CodePen with an example of my issue:
http://codepen.io/realph/pen/LAFsi
Any help with this is appreciated. Thanks in advance!
You could use a padding trick (see CSS-square container) to do what you want with one image
h1 {
background: url(http://images.uncyclomedia.co/uncyclopedia/en/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png) no-repeat top left orange;
background-size: contain;
text-indent: -999999px;
text-align: center;
position:relative;
width:100%;
height: 0;
padding-bottom: 30%;
display:block;
}
Demo