Cover and Background Images Not Responsive on Medium and Sma

Topic: Cover and Background Images Not Responsive on Medium and Smaller Viewports

surface2air asked 3 years ago

Hi MDBootstrap Support, I am trying to debug two background images for a live project: One - is the Landing Page Cover Image. Borrowing from a free template, the image no longer appears full screen and is not fluid. And it lacks a fluid responsiveness in smaller viewports; the graphic's title text bleeds outside the browser chrome. Would I need to recut the image and run a media query for this class? Two - is the image of the dancer. She appears fine on desktop displays, but gets clipped on smaller viewports. I have tried to use the CSS background-position:left property to try and bring her into view, but that means a resize of the image height. Any help with these issues would be greatly appreciated! The event is approaching soon. Thank you! Eric RE: http://gridinteractive.com/gma-2018/georgetown-carnival.htm

Add comment

Ollie Vincent pro answered 3 years ago

1 0 Best answer

Hi, You could try using background-position:contain; but then it would only respond as per the image size (like a normal image). Thanks

Add comment

Write

Create snippet

Status

Answered

Specification of the issue

User: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

surface2air

45Support score
20Questions 12Answers

0Snippets likes 0Snippets

Service	Why?	Agreement
Essential cookies	These cookies are strictly necessary to provide you with services available through our websites and to use some of its features, such as access to secure areas. Because these cookies are strictly necessary to deliver the websites, you cannot refuse them without impacting how our websites function. You can block or delete them by changing your browser settings.	No Yes
Functional	These cookies are used to enhance the performance and functionality of our websites but are non-essential to their use. However, without these cookies, certain functionality may become unavailable. These cookies are served by brandflow.net.	No Yes
Google AdWords	These cookies are used to make advertising via Google AdWords messages more relevant to you and your interests. They also perform functions like preventing the same ad from continuously reappearing, ensuring that ads are properly displayed, and in some cases selecting advertisements that are based on your interests.	No Yes
Facebook Pixel	These cookies are used to make advertising Facebook messages more relevant to you and your interests. They also perform functions like preventing the same ad from continuously reappearing, ensuring that ads are properly displayed, and in some cases selecting advertisements that are based on your interests.	No Yes

Service

Why?

Agreement

Essential cookies

These cookies are strictly necessary to provide you with services available through our websites and to use some of its features, such as access to secure areas. Because these cookies are strictly necessary to deliver the websites, you cannot refuse them without impacting how our websites function. You can block or delete them by changing your browser settings.

No Yes

Functional

These cookies are used to enhance the performance and functionality of our websites but are non-essential to their use. However, without these cookies, certain functionality may become unavailable. These cookies are served by brandflow.net.

No Yes

Google AdWords

These cookies are used to make advertising via Google AdWords messages more relevant to you and your interests. They also perform functions like preventing the same ad from continuously reappearing, ensuring that ads are properly displayed, and in some cases selecting advertisements that are based on your interests.

No Yes

Facebook Pixel

These cookies are used to make advertising Facebook messages more relevant to you and your interests. They also perform functions like preventing the same ad from continuously reappearing, ensuring that ads are properly displayed, and in some cases selecting advertisements that are based on your interests.

No Yes

surface2air

Privacy Preferences