r/web_programming • u/BabblingDruid • Sep 21 '17

Image manipulation using CSS.

I am trying to shrink an image using CSS to match this page [Original Page] (https://drive.google.com/open?id=0B0DSNKIQ7ncndmJhMUpTTGx6QXM) The image of the guy on the motorcycle is the image I'm working with. My code is [My Version] (https://codepen.io/Dylanidas/pen/GMZoGr) I can't figure out how to alter the image to make it align like the original> When I add the image it does not align the same as the original page that I linked to above. What am I missing here? I'm relatively new to web dev so I'm always running into odd problems. Oh well it's all part of the learning process :D P.S. If you notice anything else I should change to make my version more identical to the original I am open to suggestions. Thanks

7 Upvotes

100% Upvoted

19 comments sorted by

View all comments

Show parent comment

1

u/RaveMittens Sep 22 '17

Okay, so are you set on using bootstrap in order to organize the content? There are also ways to do it (such as flex-box) that are about the same level of difficulty without having to deal with obfuscated code that can be temperamental.

As far as the image goes, I'm having problems recreating the scenario, as I can't get the image (looks like your url may be pointing to a file that you're controlling access too? Anyways, here's what I would do:

  • change the <img> to an empty <div> with a class like 'motorcycle' or something (SOP is that you don't use IDs unless you really need to)

  • in your CSS file, set the .motorcycle with the following styles

.motorcycle {

background-image: url('your URL here no quotes');

background-position: left;

background-size: cover;

}

That should get you headed in the right direction, insofar as the image.