This forum is now read-only. Please use our new forums at discuss.codecademy.com.

Make a Website: Bootstrap Forum

View Course » View Exercise

940 points
92b66a18deb639030717bd6eb012255b?s=140&d=retro
Submitted by
Armant
over 2 years ago

Made a large .png image, shared it on google drive, but it still doesn't work

As mentioned in title
i've tried other images as well.
I can't find an image big enough on google that i like.
so i made a wough one on photoshop in .png at 1278px by 500px( as per link)
uploaded it to my google drive account, shared it, copied and pasted the link in the .css code.

below is the code i'm using for the main.ccs file.:

.jumbotron {
  background-image:url ('https://drive.google.com/file/d/0ByOXXnPDE5MFemJpUFpDSFVWeXc/view?usp=sharing');
  height: 500px;
  background-repeat: no-repeat;
  background-size: cover;
}

I'm stuck...


1 vote

permalink

yes, but google put the image somewhere on the server. so you need to go here, right click on the image, select: copy image location, and use that url for background.

here is a simple bin of the difference it makes. the reason you need the image source is because the webpage of google pulls the image from somewhere on the server. so the url of the page isn't the same as the image actual location on the server

if you have problem with columns, i am going to need your code to see what is wrong

2937 points
593d545c83696644420003b7_64554016
Submitted by
stetim94
over 2 years ago

2 Comments

92b66a18deb639030717bd6eb012255b?s=140&d=retro Armant over 2 years ago

Great the images are showing now. THANKS

92b66a18deb639030717bd6eb012255b?s=140&d=retro Armant over 2 years ago

this forum won't allow me to send the code for the columns, im going to try post a new question.


0 votes

permalink

you need to copy the image location, not the url of the webpage.

did you manage to pass the exercise?

2937 points
593d545c83696644420003b7_64554016
Submitted by
stetim94
over 2 years ago

1 Comment

92b66a18deb639030717bd6eb012255b?s=140&d=retro Armant over 2 years ago

Hi Stetim94.
Thanks for the assistance, the image is stored in the cloud on google drive. unless i'm not understanding you well about the image location...

yes i did get through jumbotron 11/14 to the next exercise( Neighborhood Guides 12/14) where i'm now having the same problem with the images and a new one where 1 image is using 4 columns instead of 2 as I've set it.


0 votes

permalink

<div class="neighborhood-guides">
    <div class="container">
    <h2>Our Professional Services</h2>
    <p>We take Great pride in our Workmanship</p>
        <div class="row">
            <div class="col-md-2">
                <div class="thumbnail">
                    <h5>Carpentry<h5>
                    <img src="https://lh5.googleusercontent.com/iF75v8dyXFKCj9jFfwKihSjgS-VojgUU1_l4JXlK_AKsJvpOlf6x1J7BkX3eZmmJ87S3rPKpyc4=w1342-h561">
                </div>
                <div class="thumbnail">
                    <h5>Built In Cupboards<h5>
                    <img src="https://lh6.googleusercontent.com/BTOn-TwThbtS4SxEBZ1Cn12VWKDiQ_u1qGloo76KWXBgL07H7M7VjDUzUyjoU7Z_Tz11IXiHM7w=w1342-h561">
                </div>
                <div class="thumbnail">
                    <h5>Roofing<h5>
                    <img src="https://lh5.googleusercontent.com/VQ3OHihhMSCWKeSniOsBZqR3rWSTdXzDwADMjDPYs1de59yqVoMDgT1N79NsMZ6A9o-reMRqln0=w1342-h561">
                </div>
            </div>
         </div>
    </div>
</div> 

940 points
92b66a18deb639030717bd6eb012255b?s=140&d=retro
Submitted by
Armant
over 2 years ago

1 Comment

92b66a18deb639030717bd6eb012255b?s=140&d=retro Armant over 2 years ago

Its one part of the code as the forum only allows 3000 char per post


0 votes

permalink

here, i improved it. why do you have only one col-md-2 in the entire row? i am confused. anyway, what is your question?

2937 points
593d545c83696644420003b7_64554016
Submitted by
stetim94
over 2 years ago

9 Comments

92b66a18deb639030717bd6eb012255b?s=140&d=retro Armant over 2 years ago

I only pasted 1 col-md-2 as the forum only alows for 3000 char, i'v got 6 col-md-2

92b66a18deb639030717bd6eb012255b?s=140&d=retro Armant over 2 years ago

so you added a link to another stylesheet to add a border around each thumbnail...
my question...why don't the images stay the same size?

593d545c83696644420003b7_64554016 stetim94 over 2 years ago

but every image should be wrapped in a col, otherwise, post your full code at jsbin, and paste the url. because no where you are telling the image to scale nicely, to fix this add this to the image: class="img-responsive" this will cause it to scale nicely according to his parent

593d545c83696644420003b7_64554016 stetim94 over 2 years ago

your image don't show + you didn't add class="img-responsive", once you done that repost the url, and ask your question

92b66a18deb639030717bd6eb012255b?s=140&d=retro Armant over 2 years ago

the images show on my side, i've now even edited them so all of them are 300 x300px, i've added the class=img-responsive as well(not sure if it is in the right place)

something odd is happening there are borders around some images, some img resize to the right size for the col, others don't resize, and others just simply overlap each other. it's now become a mess, where did i go wrong?

92b66a18deb639030717bd6eb012255b?s=140&d=retro Armant over 2 years ago

sorted the positioning out, my div's were wrong, thanks for the for that /div trick helped.

92b66a18deb639030717bd6eb012255b?s=140&d=retro Armant over 2 years ago

Is there a way to make the alt tags of the images show when you hover over the image?

593d545c83696644420003b7_64554016 stetim94 over 2 years ago

sorted it? good, what trick? no problem. maybe with jquery? maybe you can find it on google/stackoverflow