Responsive Transparent Image
-
-
- Robert Tee
- Sr. Rocketeer
- Posts: 121
- Thanks: 0
-
I had help using a transparent image as a bacgrkound on all pages. It is working well for desktop browsers but not mobile. I notice the mobile browsers only take the quarter bottom of the photo instead of trying to fit the entire photo.
www.rockettheme.com/forum/free-joomla-st...und-picture-on-pages
Is there an override for this so the entire photo is used on mobile browsers?
I'm using:
body {
background-image: url("/images/main-background.jpg");
background-size: cover;
background-attachment: fixed;
}
#rt-top-surround {
background-color: transparent;
}
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
- Hi Robert i need to see the URL ...
- Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Robert Tee
- Sr. Rocketeer
- Posts: 121
- Thanks: 0
-
This message contains only secure information that is visible to Robert Tee, moderators and administrators
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
-
I suggest you make a new image for mobile, use this code and alter the image path.
@media only screen and (max-width: 480px) { body { background-size: cover; background-image: url(/images/miller-pizza-chicago-storefront-background.jpg); } } - Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Robert Tee
- Sr. Rocketeer
- Posts: 121
- Thanks: 0
- Hello thank you. I have tried this but appears to be the same when viewing on my iphone 7 plus
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
- Did you alter the Path for the image and made a new one????
- Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Robert Tee
- Sr. Rocketeer
- Posts: 121
- Thanks: 0
-
I created /images/MOBILE and placed a copy of the image here. I added the path to CSS, still same results it seems..
@media only screen and (max-width: 480px) {
body {
background-size: cover;
background-image: url(/images/MOBILE/image.jpg);
}
}
-
-
-
- Robert Tee
- Sr. Rocketeer
- Posts: 121
- Thanks: 0
- hello, seeing if im right here. thank you
-
-
-
- Robert Tee
- Sr. Rocketeer
- Posts: 121
- Thanks: 0
-
Here's what I'm thinking but it's still not resizing on my mobile....please help
body {
background-image: url("/images/SIZES/miller-pizza-chicago-storefront-background-desktop.jpg");
background-size: cover;
background-attachment: fixed;
}
#rt-top-surround {
background-color: transparent;
}
.responsive-image{
width: 100%;
background-size: 100% 100%;
}
/* Retina display */
@media screen and (min-width: 1024px){
.responsive-image{
background-image: url('/images/SIZES/miller-pizza-chicago-storefront-background-retina.jpg');
}
}
/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px){
.responsive-image{
background-image: url('/images/SIZES/miller-pizza-chicago-storefront-background-desktop.jpg');
}
}
/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px){
.responsive-image{
background-image: url('/images/SIZES/miller-pizza-chicago-storefront-background-tablet.jpg');
}
}
/* Mobile HD */
@media screen and (min-width: 350px) and (max-width: 760px){
.responsive-image{
background-image: url('/images/SIZES/miller-pizza-chicago-storefront-background-mobile-hd.jpg');
}
}
/* Mobile LD */
@media screen and (max-width: 350px){
.responsive-image{
background-image: url('/images/SIZES/miller-pizza-chicago-storefront-background-mobile-ld.jpg');
}
}
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
- Those are ok but for mobile you need a vertical image so its height is big and width is narrow to work better ...
- Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
Time to create page: 0.052 seconds