Footer background image
Permalink Browser Info Environment
Hi there,
I was trying to put an overlay image on the footer area (whole site). Didn't succeed, only possible to change footer background color (Design/Customize Theme).
I have 4 columns and I can get background image under 1 column, but I want it 'under' these all columns align right.
Advanced Custom CSS could work, but I can't code... can someone help?
I was trying to put an overlay image on the footer area (whole site). Didn't succeed, only possible to change footer background color (Design/Customize Theme).
I have 4 columns and I can get background image under 1 column, but I want it 'under' these all columns align right.
Advanced Custom CSS could work, but I can't code... can someone help?
Type: | Discussion |
---|---|
Status: | Resolved |
Like to have it this way. No need to be on mobile view.
Hi,
Plz, copy this piece into your `custom.dev.less` file & tweak the values:
If you don't know how to use the `custom.dev.less`, check the `Instructions` page #18
Plz, copy this piece into your `custom.dev.less` file & tweak the values:
/* set footer background image */ @footer-overlay-color: rgba(0, 0, 0, 0.7); // the last parameter is opacity of the overlay color @footer-overlay-image: 'footer-bg.jpg'; // copy the image into `\application\config\pixel_theme` #footer { background-image: linear-gradient(@footer-overlay-color, @footer-overlay-color), url(@footer-overlay-image); background-size: auto; // values: auto, contain, cover background-position: top right; // position of the image background-repeat: no-repeat; }
If you don't know how to use the `custom.dev.less`, check the `Instructions` page #18
This worked! Thank you for your help Shahroq :)
I used transparent png image, so I change rfooter-overlay-color to gba(0, 0, 0, 0).
I used transparent png image, so I change rfooter-overlay-color to gba(0, 0, 0, 0).
Could you post a picture or link as to what exactly you want to do?