I am practicing building a website from an image. The image is supposed to fit inside the div with the red border, but when I set the images width to 200px, it pops out like this, and I dont know why.
Basically, I want the image on top of the blue text/background, and I want them both nested in a div about as tall and wide as the two grey boxes to its left. There will be another div to the right of this one, so 3 divs across total.
Hi @Brett-dykes
Try to set the image’s width to be equal to 100% or 80%.
Otherwise, please provide a link to your code.
<div id="articles">
<div id="newslinks">
<div id="market-news">
<h4>Market News</h4>
<a href="#"><li>Student Housing Heats Up in St. Louis - 10/27/14</li></a>
<a href="#"><li>Student Housing Heats Up in St. Louis - 10/27/14</li></a>
<a href="#"><li>Student Housing Heats Up in St. Louis - 10/27/14</li></a>
<a href ="#" id="viewmore">+ View more</a>
</div>
<div id="announcements">
<h4>Announcements</h4>
<a href="#"><li>Student Housing Heats Up in St. Louis - 10/27/14</li></a>
<a href="#"><li>Student Housing Heats Up in St. Louis - 10/27/14</li></a>
<a href="#"><li>Student Housing Heats Up in St. Louis - 10/27/14</li></a>
<a href ="#" id="viewmore">+ View more</a>
</div>
</div>
<div id="article-company-news">
<div id="hq-img">
<img src="/img/tile-lg.jpg" alt="HQ img">
</div>
<div id="company-news-content">
<h4>Company News</h4>
<p>Military Service Provided Excellent Professional Traning for Company Employee</p>
</div>
</div>
</div>
CSS
#articles {
display: flex;
/* justify-content: space-between; */
height: 100%;
}
#newslinks {
display: flex;
flex-direction: column;
margin-top: 1rem;
line-height: 1.5;
width: 22rem;
}
#market-news h4 {
text-transform: uppercase;
}
#newslinks #market-news {
background: #c9c8c7;
padding: 10px;
margin-bottom: 1rem;
list-style: square;
color: #283138;
font-size: .75rem;
padding-bottom: 2rem;
/* flex: 1; */
}
#newslinks #announcements{
background: #c9c8c7;
padding: 10px;
margin-bottom: 1rem;
list-style: square;
color: #283138;
font-size: .75rem;
padding-bottom: 2rem;
/* flex: 1; */
}
#announcements h4 {
text-transform: uppercase;
}
#market-news a {
color: #283138;
}
#announcements a {
color: #283138;
}
#article-company-news {
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid red;
/* width: 296px; */
}
#company-news-content {
background: #003da7;
/* height: 100%; */
flex: 1;
}
#hq-img {
/* background: url('/img/tile-lg.jpg') no-repeat center center/cover; */
display: block;
width: 200px;
height: 100%;
flex: 1;
Sorry forgot to link the code! I posted it.
And thanks I will try that
https://codepen.io/brett-dykes/pen/mdbWqjd
Heres the codepen link: it doesnt have the local file of the images im using however
Is the code below the one I should look at?
#hq-img {
background: url('/img/tile-lg.jpg') no-repeat center center/cover;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
height: 100%;
}
That one and these:
#article-company-news {
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid red;
/* width: 296px; */
}
#company-news-content {
background: #003da7;
/* height: 100%; */
flex: 1;
}
The #article-company-news div is the parent/container of the other two
So what is wrong with it?
Here is the code I used:
#article-company-news {
/* flex: 1; */
display: flex;
flex-direction: column;
min-height: 100%;
border: 1px solid red;
width: 296px;
}
#company-news-content {
/* background: #003da7; */
height: 100%;
}
#hq-img {
background: url('http://forum.freecodecamp.org/user_avatar/www.freecodecamp.org/brett-dykes/90/116993_2.png') no-repeat center center/cover;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
}
Here is the result:
Wow thanks! This looks much closer!
Looks like I mainly needed to use a set width combined with max-height. Heres what I got so far:
so the question now, is how come the text is sitting on top of the image as opposed to below it? And how do I get the full size image within the area that the image is currently in?
Also, the text should be about 40% of the div, and the image about 60%. I am trying to make a near exact replica of the completed site linked above.
Update the codepen link so I can see the same code as you.
Done. For some reason the image disappears on the codepen. But it shows up fine on my local computer with VScode
Seems like you forgot to update the HTML since there I can see only one article-company-news div tag.
Lol… you are correct. I’m a space cadet sometimes. Fixed.
Very close! In the website example I am trying to emulate, the entire picture is on top of the text box with its aspect ratio in place.
Example:
I suggest you to read a bit more about the flexbox and the positioning and practice it.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.
See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.
Note: Backticks are not single quotes.
