How can I have a full image background inside a column but without knowing the height of it? Im using bootstrap and I need the image to be responsive.
Please look at the image for a better understanding
<div class=" col-xs-12 col-sm-5 col-md-5 col-lg-4 bgimage">
</div>
<div class=" col-xs-12 col-sm-7 col-md-7 col-lg-8">
</div>
with .bgimage
{
background-image: url(../img/user.jpg);
background-size: cover;
}
here's a bootstrap example of a column that has background-size:cover
http://jsfiddle.net/maio/7rbjj2fn/3/
.bgimage{
background-image: url(http://oi58.tinypic.com/2u9mo0g.jpg);
background-size: cover;
height:200px
}
.right{
background:yellow;
height:100%;
}
.row{
background:tomato
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
<div class=" col-sm-5 col-md-5 col-lg-4 bgimage">
</div>
<div class="right col-sm-7 col-md-7 col-lg-8">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper
Using background-size: cover; will cover the box without losing the ratio.
Using background-size: 100%; will fill the box but will losing the ratio.
EDIT
This is sample how the background works.
.table {
display: table;
width: 100%;
}
.cell {
display: table-cell;
}
.cell.left {
background-image: url(http://oi58.tinypic.com/2u9mo0g.jpg);
background-size: cover;
}
.cell.right {
width: 60%;
padding: 80px 30px;
background: #ccc;
}
<div class="table">
<div class="cell left"></div>
<div class="cell right">
Lorem ipsum dolor sit amet
</div>
</div>
Related
This question already has answers here:
One flex/grid item sets the size limit for siblings
(6 answers)
Closed 3 years ago.
I am trying to build a card-based layout, with an image taking up the left-hand half of each card. If I use a div with a background-image, the image takes up exactly half the width, and expands to exactly the height of the content on the right-hand side of the card.
However, if I instead use an img element (with object-fit: cover), the image never crops vertically when the card is too short, but instead only horizontally when the card is too tall. How can I tell the image not to cause the card to stretch, reproducing the behaviour of the div's background image?
As an example, the third and fourth cards are what I am trying to achieve, but with an image tag for semantic reasons.
main {
display: flex;
flex-direction: column;
max-width: 700px;
margin: auto;
}
article {
display: flex;
flex-direction: row;
border: 1px solid;
margin: 1em;
}
article > img {
object-fit: cover;
width: 50%;
flex-grow: 0;
flex-shrink: 0;
}
article > div:first-child {
background-position: center;
background-size: cover;
width: 50%;
flex-grow: 0;
flex-shrink: 0;
}
article > aside {
padding: 1em;
}
<main>
<article>
<img src="https://picsum.photos/id/411/1000/900" />
<aside>
<h2>img taller than the text</h2>
<p>
Here the image extends beyond the text, which I do not want.
</p>
</aside>
</article>
<article>
<img src="https://picsum.photos/id/411/1000/900" />
<aside>
<h2>img shorter than the text</h2>
<p>
With enough text, the image is the right height, with both the <kbd>img</kbd> tag and the background image.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut turpis est. Maecenas vehicula tempor purus, non laoreet turpis aliquet sit amet. Sed pellentesque augue at risus dignissim porttitor. Curabitur aliquam justo ut ante imperdiet lobortis. Aenean sit amet dui eros. Pellentesque dictum imperdiet ex in condimentum. Proin imperdiet eros a sapien egestas, quis auctor arcu laoreet. In interdum at ligula sit amet ornare. Mauris sed feugiat eros. Vestibulum in eros auctor, iaculis neque eu, tincidunt neque. Curabitur eget ligula ac tortor viverra cursus non id nunc. Morbi vestibulum ligula felis, id aliquam metus placerat at. In sed urna bibendum, volutpat ipsum et, placerat dui.
</p>
</aside>
</article>
<article>
<div style="background-image: url(https://picsum.photos/id/411/1000/900)">
</div>
<aside>
<h2>background image</h2>
<p>
With very little text, the background image is cropped to take up little height, which is what I'm trying to achieve with an image tag.
</p>
</aside>
</article>
<article>
<div style="background-image: url(https://picsum.photos/id/411/1000/900)">
</div>
<aside>
<h2>background image</h2>
<p>
With enough text, the image is the right height, with both the <kbd>img</kbd> tag and the background image.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut turpis est. Maecenas vehicula tempor purus, non laoreet turpis aliquet sit amet. Sed pellentesque augue at risus dignissim porttitor. Curabitur aliquam justo ut ante imperdiet lobortis. Aenean sit amet dui eros. Pellentesque dictum imperdiet ex in condimentum. Proin imperdiet eros a sapien egestas, quis auctor arcu laoreet. In interdum at ligula sit amet ornare. Mauris sed feugiat eros. Vestibulum in eros auctor, iaculis neque eu, tincidunt neque. Curabitur eget ligula ac tortor viverra cursus non id nunc. Morbi vestibulum ligula felis, id aliquam metus placerat at. In sed urna bibendum, volutpat ipsum et, placerat dui.
</p>
</aside>
</article>
</main>
You can simply make the image out of the flow using position:absolute so only the text content will define the height:
main {
display: flex;
flex-direction: column;
max-width: 700px;
margin: auto;
}
article {
/*display: flex;
flex-direction: row; not needed sine one element is in-flow */
border: 1px solid;
margin: 1em;
position:relative;
}
article > img {
position:absolute;
top:0;
left:0;
height:100%;
width:50%;
object-fit: cover;
}
article > aside {
padding: 1em;
width:50%;
margin-left:auto;
box-sizing:border-box;
}
<main>
<article>
<img src="https://picsum.photos/id/411/1000/900" />
<aside>
<h2>img taller than the text</h2>
<p>
Here the image extends beyond the text, which I do not want.
</p>
</aside>
</article>
<article>
<img src="https://picsum.photos/id/411/1000/900" />
<aside>
<h2>img shorter than the text</h2>
<p>
With enough text, the image is the right height, with both the <kbd>img</kbd> tag and the background image.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut turpis est. Maecenas vehicula tempor purus, non laoreet turpis aliquet sit amet. Sed pellentesque augue at risus dignissim porttitor. Curabitur aliquam justo ut ante imperdiet lobortis. Aenean sit amet dui eros. Pellentesque dictum imperdiet ex in condimentum. Proin imperdiet eros a sapien egestas, quis auctor arcu laoreet. In interdum at ligula sit amet ornare. Mauris sed feugiat eros. Vestibulum in eros auctor, iaculis neque eu, tincidunt neque. Curabitur eget ligula ac tortor viverra cursus non id nunc. Morbi vestibulum ligula felis, id aliquam metus placerat at. In sed urna bibendum, volutpat ipsum et, placerat dui.
</p>
</aside>
</article>
Similar question: How can you set the height of an outer div to always be equal to a particular inner div?
main {
display: flex;
flex-direction: column;
max-width: 700px;
margin: auto;
}
article {
display: flex;
flex-direction: row;
border: 1px solid;
margin: 1em;
}
article > img {
object-fit: cover;
width: 50%;
flex-grow: 0;
flex-shrink: 0;
}
article > div:first-child {
background-position: center;
background-size: cover;
width: 50%;
flex-grow: 0;
flex-shrink: 0;
}
article > aside {
padding: 1em;
}
.img-container{
border:2px solid red;
overflow:hidden;
position:relative;
}
.img-container div{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.img-container img{
object-fit: cover;
width:100%;
height:100%;
}
<main>
<article>
<div class="img-container">
<div>
<img src="https://picsum.photos/id/411/1000/900" />
</div>
</div>
<aside>
<h2>img taller than the text</h2>
<p>
Here the image extends beyond the text, which I do not want.
</p>
</aside>
</article>
<article>
<div class="img-container">
<img src="https://picsum.photos/id/411/1000/900" />
</div>
<aside>
<h2>img shorter than the text</h2>
<p>
With enough text, the image is the right height, with both the <kbd>img</kbd> tag and the background image.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut turpis est. Maecenas vehicula tempor purus, non laoreet turpis aliquet sit amet. Sed pellentesque augue at risus dignissim porttitor. Curabitur aliquam justo ut ante imperdiet lobortis. Aenean sit amet dui eros. Pellentesque dictum imperdiet ex in condimentum. Proin imperdiet eros a sapien egestas, quis auctor arcu laoreet. In interdum at ligula sit amet ornare. Mauris sed feugiat eros. Vestibulum in eros auctor, iaculis neque eu, tincidunt neque. Curabitur eget ligula ac tortor viverra cursus non id nunc. Morbi vestibulum ligula felis, id aliquam metus placerat at. In sed urna bibendum, volutpat ipsum et, placerat dui.
</p>
</aside>
</article>
<article>
<div style="background-image: url(https://picsum.photos/id/411/1000/900)">
</div>
<aside>
<h2>background image</h2>
<p>
With very little text, the background image is cropped to take up little height, which is what I'm trying to achieve with an image tag.
</p>
</aside>
</article>
<article>
<div style="background-image: url(https://picsum.photos/id/411/1000/900)">
</div>
<aside>
<h2>background image</h2>
<p>
With enough text, the image is the right height, with both the <kbd>img</kbd> tag and the background image.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut turpis est. Maecenas vehicula tempor purus, non laoreet turpis aliquet sit amet. Sed pellentesque augue at risus dignissim porttitor. Curabitur aliquam justo ut ante imperdiet lobortis. Aenean sit amet dui eros. Pellentesque dictum imperdiet ex in condimentum. Proin imperdiet eros a sapien egestas, quis auctor arcu laoreet. In interdum at ligula sit amet ornare. Mauris sed feugiat eros. Vestibulum in eros auctor, iaculis neque eu, tincidunt neque. Curabitur eget ligula ac tortor viverra cursus non id nunc. Morbi vestibulum ligula felis, id aliquam metus placerat at. In sed urna bibendum, volutpat ipsum et, placerat dui.
</p>
</aside>
</article>
</main>
Use object-fit: cover; width:100%; height:100%;. You need to specify width and height with "object-fit: cover" to achieve this.
I have this weird case because my bug displays differently at my website and at JSFiddle. That's why I also put a printscreen to show you how it looks on my website.
Here is the JSFiddle: https://jsfiddle.net/Pysilla/cm8s1d7t/
<section id="fashion" class="img-responsive">
<div class="container">
<div class="row">
<div class="item element col-md-5">
<div class="page-header">
<h2>Fashion<span> photos</span></h2>
</div>
<p>Betiam finibus ac tellus sed ullamcorper. Suspendisse vestibulum mollis feugiat. Fusce vel turpis vitae nulla ullamcorper gravida non vel dolor. Ut rhoncus, metus vitae ultrices varius, ex mauris sodales leo, quis imperdiet turpis ipsum et ante. Phasellus hendrerit rutrum tincidunt. Sed sed viverra ligula, non ullamcorper mauris. Quisque dignissim sollicitudin nulla quis tincidunt. Cras at elementum massa. Cras eget mi hendrerit, congue nunc in, tristique massa. Vivamus at vestibulum ex.</p>
<div class="text-center">
<span>See more</span>
</div>
</div>
</div>
</div>
</section>
(When you change size of screen you could see little stripe on the left inside of the button)
I hope you could see the difference.
You just need to account for the 2px border on .btn-primary. You can use translate(calc(-100% - 2px)); on the hidden state of the pseudo element.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<style>
.btn-primary{
margin-top:1em;
background-color:#3CD3DC;
background-image:none;
border:2px solid #3CD3DC;
display:inline-block;
transition:all 0.3s;
overflow:hidden;
box-shadow:none !important;
position:relative;
}
.btn-primary:hover{
background-color:transparent;
border:2px solid #3CD3DC;
}
.btn-primary:before{
content:"";
position:absolute;
background-color:#1fa5ad;
width:100%;
height:100%;
top:0;
left:0;
transform:translateX(calc(-100% - 2px));
transition: 0.8s;
}
.btn-primary:hover:before{
transform:translateX(0%);
left:0;
}
.btn-primary span{
position:relative;
}
</style>
<section id="fashion" class="img-responsive">
<div class="container">
<div class="row">
<div class="item element col-md-5">
<div class="page-header">
<h2>Fashion<span> photos</span></h2>
</div>
<p>Betiam finibus ac tellus sed ullamcorper. Suspendisse vestibulum mollis feugiat. Fusce vel turpis vitae nulla ullamcorper gravida non vel dolor. Ut rhoncus, metus vitae ultrices varius, ex mauris sodales leo, quis imperdiet turpis ipsum et ante. Phasellus hendrerit rutrum tincidunt. Sed sed viverra ligula, non ullamcorper mauris. Quisque dignissim sollicitudin nulla quis tincidunt. Cras at elementum massa. Cras eget mi hendrerit, congue nunc in, tristique massa. Vivamus at vestibulum ex.</p>
<div class="text-center">
<span>See more</span>
</div>
</div>
</div>
</div>
</section>
Another alternative is to set the button's :before element visibility to "hidden" by default and then "visible" on mouse over.
.btn-primary:before{
content:"";
position:absolute;
background-color:#1fa5ad;
width:100%;
height:100%;
top:0;
left:0;
transform:translateX(-100%);
transition: 0.8s;
visibility: hidden;
}
.btn-primary:hover:before{
transform:translateX(0%);
left:0;
visibility: visible;
}
https://jsfiddle.net/cm8s1d7t/1/
I'm using Bulma 0.4.0, though the answer may not be associated with Bulma itself.
How can I set column height equal to others? (see screenshots below)
Edit: codepen with more text that presents actual behavior: https://codepen.io/anon/pen/vmKVbx
Expected behavior:
Actual behavior:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
<div class="columns">
<div class="column">
<p class="notification is-info">First column</p>
</div>
<div class="column">
<p class="notification is-success">Second column</p>
</div>
<div class="column">
<p class="notification is-warning">Third column</p>
</div>
<div class="column">
<p class="notification is-danger">Fourth</p>
</div>
</div>
Here is a simple solution, by adding this CSS rule, and make sure it load after the Bulma CSS
.column {
display: flex;
}
Updated codepen
Stack snippet
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
<style>
.column {
display: flex;
}
</style>
</head>
<body>
<div class="columns">
<div class="column">
<p class="notification is-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu consectetur lorem, nec facilisis dolor. Morbi rhoncus, mi sit amet ornare tincidunt, augue sem aliquet mauris, non pretium orci nisl at est. Curabitur placerat pharetra augue. Etiam non eros nulla. Praesent aliquet sem dui, id varius enim convallis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis mauris felis, sit amet consectetur augue sollicitudin id.</p>
</div>
<div class="column">
<p class="notification is-success">Nulla a mauris vel erat elementum scelerisque. Cras mollis consequat neque, vitae sagittis nisl dapibus porttitor. Donec et rutrum ligula. Donec luctus iaculis orci, nec imperdiet felis semper quis. Nulla a convallis eros, facilisis hendrerit risus. Nulla sit amet porta quam. Nullam maximus tempus sem, dapibus dapibus purus sollicitudin vel. Phasellus at rhoncus odio. Quisque sit amet ornare dolor. Maecenas accumsan viverra tristique. Etiam vulputate nibh ipsum, at rutrum lacus hendrerit ut. Nunc sodales diam purus, in ultricies nulla consectetur sit amet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus ut tincidunt mauris.</p>
</div>
<div class="column">
<p class="notification is-warning">Pellentesque eros tortor, pharetra in lorem quis, maximus hendrerit ex. Praesent nunc ante, elementum at congue ut, ultricies quis lectus. Aenean vel elementum risus. Vestibulum aliquet justo in ligula dictum commodo. Nullam condimentum ante vitae nulla dignissim, vitae interdum neque dapibus. Aenean nec quam egestas, viverra ex vel, tempus lectus. Quisque eu euismod neque. Mauris aliquam neque a porta condimentum. Cras eget nisi turpis. Aenean lacus velit, dapibus eu aliquam eget, aliquet id quam. Integer ultricies est quis erat facilisis congue vel efficitur ipsum. Nunc id varius orci, consequat vehicula libero. Morbi maximus, orci in efficitur feugiat, quam lacus lobortis elit, in blandit mauris dolor sit amet mauris.
</p>
</div>
<div class="column">
<p class="notification is-danger">Morbi turpis nunc, porttitor ut bibendum et, tincidunt vel nisi. Ut magna massa, placerat id nunc at, venenatis sodales leo. Nunc dapibus, lacus ac molestie vestibulum, tortor mauris posuere turpis, at pretium orci orci in justo.</p>
</div>
</div>
</body>
</html>
In Bulma, you have got the class .is-flex to achieve the same.
I know it's a bit late, but maybe someone who looks for similar solution will find my answer helpful.
You can use Bulma's Tile system to get something that will behave like equal height columns.
<div class="tile is-ancestor">
<div class="tile is-horizontal">
<div class="tile is-parent">
<div class="tile is-child">
<!--Content here-->
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box">
<!--Content here-->
</div>
</div>
</div>
</div>
No additional css needed. You can also specify horizontal size of columns using is-1 - is-12 classes.
Check this pen to see this in action
This did the trick for me.
<div class="column">
<section class="section1">
...
</section>
</div>
.section1 {
height: 100%;
}
This works fine for me with this code:
<div class="columns">
<div class="column my-class">
one thing
</div>
<div class="column my-class">
many other <br><br><br> etc. things
</div>
</div>
<style>
.column.my-class {
display: inline-flex;
}
.column.my-class > div {
width: 100%; // only Edge needed this nonsense
}
</style>
Worked in Chrome 61.0.3163.100 (of course), Edge 40.15063.674.0, Firefox 57.0.
align-items: stretch http://cssreference.io/flexbox/
.columns {
flex-wrap: wrap;
align-items: stretch;
}
Ref: https://github.com/jgthms/bulma/issues/696
I noticed that making .column as flex broke the layout.
I solved with the following CSS rule, this way I can use the class .is-equal-height if I want aligned columns.
.columns.is-equal-height > .column > * {
height: 100% !important;
}
I am attempting to fade out one element using "ng-show" and fade in another at the same time. This is working all fine and dandy, but unfortunately when the element which is fading out is hidden, there appears to be some "snapping" when display: none is set.
I've attempted setting position: absolute on my ng-hide-add-active & ng-hide-remove-active but this simply screws up the layout.
HTML:
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="form-container">
<div class="page-header text-center">
<h1 id="wf-logo">Hello</h1>
<hr />
<div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Stuff Box</h3>
</div>
<div class="sk-folding-cube animate" ng-show="!doneLoading">
<div class="sk-cube1 sk-cube"></div>
<div class="sk-cube2 sk-cube"></div>
<div class="sk-cube4 sk-cube"></div>
<div class="sk-cube3 sk-cube"></div>
</div>
<div id="content-well" class="well animate" ng-show="doneLoading">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia urna vitae lectus faucibus porta. Nulla eu consequat nisl. Quisque fringilla sapien id vulputate sollicitudin. Curabitur et facilisis justo. Donec malesuada augue vitae diam maximus luctus. Nulla fermentum consectetur ipsum ut tempor. Curabitur pretium eros eget nisi bibendum fermentum. Cras fermentum egestas nunc ut vulputate. Nulla aliquam tortor ut nulla consequat faucibus. Fusce imperdiet, felis nec semper vestibulum, magna dui ultricies tortor, eget mattis mauris arcu et ipsum. Suspendisse imperdiet nec mauris eget placerat.</p>
<p>Nulla purus augue, congue sed sollicitudin ut, volutpat sed ex. Donec lobortis sem eu risus consequat tincidunt. Nullam egestas lectus et semper gravida. Suspendisse facilisis erat a eros scelerisque euismod. Sed elementum eros ac nibh viverra condimentum eu vel mi. Ut sit amet nulla sit amet velit dignissim cursus quis ut mi. In a ultrices dolor. Proin sollicitudin sit amet lorem in fringilla. Mauris ac egestas est. Donec quis fermentum est, nec interdum nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id massa pellentesque, fringilla orci id, ultrices nisl. Nam non viverra felis, ac sodales justo.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
/* Styles */
#content-well {
margin-bottom: 0px;
}
/* Animations */
.animate.ng-hide-add,
.animate.ng-hide-remove {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.animate.ng-hide-add.ng-hide-add-active,
.animate.ng-hide-remove {
opacity:0;
}
.animate.ng-hide-add,
.animate.ng-hide-remove.ng-hide-remove-active {
opacity:1;
}
/* Folding cube spinner */
.sk-folding-cube {
margin: 40px auto;
width: 40px;
height: 40px;
position: relative;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
Please see this Plunker:
http://plnkr.co/edit/6vSRIJ8xkmn75S9FyLMJ?p=preview
Is it possible to have the loading spinner & content both remain centered and properly positioned while one fades out and the other fades in? Any assistance would be greatly appreciated. Thank you!
Put position: absolute on one of the two containers.
For example:
.sk-folding-cube {
position: absolute;
The drawback is that you will have to add more CSS both to position the element as you want and to make it look like the panel wraps it.
For example:
.panel {
min-height: 161px;
}
.sk-folding-cube {
position: absolute;
left: 50%;
margin-left: -20px;
margin-top: 40px;
margin-bottom: 40px;
width: 40px;
height: 40px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
Demo: http://plnkr.co/edit/5lYJneAkT6TwYkfg3KPJ?p=preview
Another solution is to just skip the fade out animation entirely. Personally, when elements are overlapping, I rarely find it necessary to have one of the elements fade in while the other fade out. Instead, just hide the first and fade in the other. A matter of taste perhaps.
Demo: http://plnkr.co/edit/iudjWchMXzc3wILhQmsY?p=preview
Alright, I am making this website, from a tutorial, yes I am still a beginner, no the tutorial did not explain why this things happens.
Basically, this is what happens, I have the CSS like this.
#charset "utf-8";
/* CSS Document */
body { font-family: Arial, Helvetica, sans-serif; }
.container
{
width: 800px;
margin: 0 auto;
}
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
#main
{
background: url(images/header.jpg) repeat-x;
}
#main .container
{
background: url(images/shine_04.jpg) no-repeat;
}
#logo
{
background: url(images/logo.png) no-repeat;
height:104px;
width:301px;
}
#logo h1
{
text-indent: -9999px;
margin-top: 40px;
}
And my HTML like this, I only post the body.
<div id="main">
<div class="container">
<div id="header">
<div id="logo">
<h1>Logo</h1>
</div>
<div id="tagline">
<h3>I Love Stuff</h3>
</div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--end header -->
<div id="content">
<h2>Lorem ipsum, Dolor sit</h2>
<h3>Nullam vulputate felis id odio interdum nec malesuada mi pretium. </h3>
<p>Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.
Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.
Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus.
Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna tempus vel. </p>
<p>Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.
Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.
Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Curabitur et ultricies quam. Aenean pretium aliquet velit,
gravida vulputate urna tempus vel. Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. </p>
<div id="news">
<h3>Latest Updates</h3>
<h4>Vestibulum id nulla eu sapien pellentesque</h4>
<small>June 1, 2009</small>
<p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,
facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.
Etiam laoreet ante in purus laoreet id malesuada dui pretium. Read More</p>
<h4>Vestibulum id nulla eu sapien pellentesque</h4>
<small>June 1, 2009</small>
<p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,
facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.
Etiam laoreet ante in purus laoreet id malesuada dui pretium. Read More</p>
</div><!--end news-->
</div><!--end content-->
<div id="sidebar">
<div id="subscribe">
<h3>Subscribe!</h3>
<ul>
<li>Subscribe via RSS</li>
<li>Get Email Updates</li>
<li>Follow us on Twitter</li>
</ul>
</div>
<div id="popular">
<h3>Popular Items</h3>
<ul>
<li>Lorem ipsum dolor site amet</li>
<li>Ulvinar tincidunt, Mauris id</li>
<li>Lorem ipsum dolor site amet</li>
<li>Proin tempor erat sit tene</li>
</ul>
</div>
<div id="contributors">
<h3>Contributors</h3>
<ul>
<li>John Smith, freelance writer</li>
<li>Jack McCoy, designer</li>
<li>Lenny Briscoe, editor</li>
<li>John Smith, martketing</li>
</ul>
Join Our Team
</div>
</div><!--end sidebar-->
</div><!--end main container-->
</div><!--end main-->
<div id="footer">
<div class="container">
<p>Copyright © 2009 MySite <br />
All Rights Reserved</p>
</div><!--end footer container-->
</div><!--end footer-->
In the CSS, I have the #logo h1 selector, as you can see from the parent #logo selector, I have a background, which is exactly the logo, now I want the damn logo to be positioned 40px slightly lower from the top, that's why I put margin-top: 40px; , and I don't understand why, but instead of just the logo moving 40px down, the whole page moves down! T_T, I have already spent almost 1 hour trying to deduce all the logic that my brain can handle behind this, but I just cant!
And my question is just like what I said, why does the whole page move downwards? the logo image is the only element that's supposed to move, but why the whole thing? and what do I do to fix it?
Try substituting margin with padding: padding-top: 40px on the parent container, i.e. #header, since you have specified a background image for #logo and do not have to see it move.
Why paddings over margins? It's simple: margins have the propensity to collapse. W3C has a comprehensive section dedicated to rules that govern margin collapse.
p/s: For the ease of troubleshooting, try posting your issue on JSFiddle. Not only does it help the community to visualize your problem, but it also aids to expedit the process of actually solving your problem.
Try
#logo
{
background: url(images/logo.png) no-repeat;
height:104px;
width:301px;
background-attachment:fixed;
background-position: 0px 40px;
}
try this:
#logo
{
background:url(images/logo.png) no-repeat;
background-position: 0px 40px;
height:144px;
width:301px;
}