This forum is now read-only. Please use our new forums! Go to forums

0 points
Submitted by Armant
about 9 years

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…

Answer 54f0d14095e378c628000cee

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

points
Submitted by stetim94
about 9 years

2 comments

Armant about 9 years

Great the images are showing now. THANKS

Armant about 9 years

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

Answer 54f0bc249113cb02cb0008b6

0 votes

Permalink

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

did you manage to pass the exercise?

points
Submitted by stetim94
about 9 years

1 comments

Armant about 9 years

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.

Answer 54f0f326e39efee4740011e1

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> 
points
Submitted by Armant
about 9 years

1 comments

Armant about 9 years

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

Answer 54f17a6251b88784d5001a4a

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?

points
Submitted by stetim94
about 9 years

9 comments

Armant about 9 years

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

Armant about 9 years

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?

stetim94 about 9 years

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

stetim94 about 9 years

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

Armant about 9 years

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?

Armant about 9 years

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

Armant about 9 years

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

stetim94 about 9 years

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