Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialerdragerdragsson
Courses Plus Student 5,887 Pointsimage pushing section down
Hello, my image on my page is pushing my text section down, is there anyway to abvoid this, and make the text and banner overlap the image?
heres a picture of it http://imgur.com/aT4b4EN
Kind regards
// erdag
Tim Holley
8,464 PointsIs your intentions for that image to be the background, and then the support us would be in the foreground? If this is the case, you can then do this.
.support-text {
background-image: url('...')
}
erdragerdragsson
Courses Plus Student 5,887 PointsThe images i want to the right side of the banner and the text, but the image is to large so it pushes the text and banner down, is there anyway to make the text and banner overlap the image?
2 Answers
Chyno Deluxe
16,936 PointsI agree with Tim,
Your best bet will be setting the first image as the background image. you should also set the max-width to 100% for the inner img so that it is at the .support-text width. View below. LEt me know if you have any questions.
<section class="support-text">
<img src="img/support-us.png" class="support-img">
<p>Hello hello hello hello hello hello hello hello hello hellohello
helloh ellohello hello helooh elloh ello helloh ello hello hello
hello hellohello hello hello hello </p>
</section>
.support-text {
width: 600px;
position: relative;
margin-left: auto;
margin-right: auto;
line-height: -2px;
clear:both;
margin-bottom: 130px;
background: url('http://goo.gl/ef6gSh');
}
.support-text h1 {
font-size: 30px;
}
.support-text {
font-size: 23px;
}
.support-img {
margin-top: -80px;
margin-bottom: 80px;
z-index: 1;
max-width: 100%;
}
.support-text {
clear: left;
}
erdragerdragsson
Courses Plus Student 5,887 PointsHello, thanks fro replying, i positioned my images with absolute, heres a picture http://imgur.com/KwzphQP thats how i want the them to be, but know when i rezise the window they move around, (note; my page has a fixed layout)
i want the pictures to be like this, 1 to the left and 1 to the right, but know when i rezise the characters move around heres the css
.support-text {
width: 600px;
margin-left: auto;
margin-right: auto;
line-height: -2px;
margin-bottom: 130px;
}
.support-text h1 {
font-size: 30px;
}
.support-text {
clear: left;
}
.support-text {
font-size: 23px;
}
.support-img {
margin-top: -80px;
margin-bottom: 80px;
z-index: 1;
}
.ct-pic {
position: absolute;
right: 10px;
bottom: 30px;
float: right;
}
.ct-pic:hover {
-webkit-filter: brightness(180%);
}
.t-pic:hover {
-webkit-filter: brightness(180%);
}
.t-pic {
position: absolute;
left: 40px;
bottom: 30px;
float: left;
}
Chyno Deluxe
16,936 PointsThat one is a bit more complected especially when you consider users with mobile devices. You can use media queries to display the two images on larger screen and hide them on smaller screens.
@media screen and (min-width: 690px) {
.ct-pic {
position: absolute;
right: 10px;
bottom: 30px;
float: right;
}
.ct-pic:hover,
.t-pic:hover {
-webkit-filter: brightness(180%);
}
.t-pic {
position: absolute;
left: 40px;
bottom: 30px;
float: left;
}
}
@media screen and (max-width: 689px) {
.ct-pic,
.t-pic {display: none;}
}
erdragerdragsson
Courses Plus Student 5,887 Pointsmy page is not made for mobile screens, but i want the images to stay at the same locations even when i rezise the browser, is this possible?
Chyno Deluxe
16,936 PointsI'm sure it is but the answer is beyond my knowledge unfortunately. I hope you find your answer.
erdragerdragsson
Courses Plus Student 5,887 Pointsoh okey, thanks :)
erdragerdragsson
Courses Plus Student 5,887 Pointserdragerdragsson
Courses Plus Student 5,887 Pointsheres the css
and html