CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive
DA-G-GURU
DA-G-GURU

Reputation: 141

How to make image responsive with bootstrap

I have been working on this site below and I am trying to get the banner that is displayed under the navigation menu responsive where you can still see the player in the banner once you scale down to iPhone size portrait.

The code for this area is in the css here.

.tp-page-header {
    background-image: url("../images/page-header.jpg");
    background-repeat: no-repeat;
    padding-bottom: 20px;
    padding-top: 20px;}

Website link is here. http://dagrafixdesigns.com/2019/industrial-darker/about-us.html

This banner is under each sub menu link, other than the home page as it has the slider. I am not sure if anything can be done to the CSS code to make it responsive or it has to be in the HTML as something like the top banner is done.

I have tried it to a degree in the HTML manner, but I didn't have luck.

Not a huge deal as I can get a image color or css color for this background if this wont work, but was thinking it would be nice to use if it responds on scale.

Thank you

Upvotes: 0

Views: 188

Answers (2)

Matthew Parks Jr.
Matthew Parks Jr.

Reputation: 53

I would say to make a smaller version of the image for ex 480 is the iPhone's pixel size, so make it 40 and center it. To show the image when they scale down, use @media (max-width 480px) and inside of the block, set the background image to the new one

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53709

Try a combination of background-size: cover; and background-position: 80% 0;. background-size will size the image down to match the container size when it's resized, and background-position will move to the right a little on the x-axis so you can see the football player's head.

Upvotes: 1

Related Questions