Displaying background pattern on the parent div
-
-
- Ali Samii
- Elite Rocketeer
- Posts: 629
- Thanks: 2
-
The module has a class of box6 which has the following style definitions:
.box6 { color: @corpColor; background: transparent; border: none; border-top: 2px solid @corpColor; }
However, rather than displaying the background of the sidebar-a div, it displays the background of the body!!!
sidebar-a itself doesn't have a style, but a module published in the sidebar-a position has the following styles (from mediaqueries.less):
@media only screen and (min-width: 768px){ #rt-main div.rt-container [class*="grid"] #rt-sidebar-a .rt-block::after { content: ' '; display: block; position: absolute; left: 0; right: 0;bottom: -3000px; height: 3000px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJklEQVQIHWP8//8/Awzk5+f/ZwAJgHBeXh6QAkoic8ACMBkQB4QBo1YnC60ipIsAAAAASUVORK5CYII=) repeat; } #rt-main div.rt-container { overflow: hidden; } }
This code was provided by Henning to help extend the background in sidebar-a to cover the entire height of the sidebar which is not a fixed height.
If I apply the data URI to the module itself by adding the style to the .box6 class, it causes a very small yet visible offset between the end of the module and the beginning of the background on sidebar-a. If the sidebar and module have a solid colour, that isn't an issue. However, if there is a pattern, as in this case, it becomes an issue.
How would I need to change the less to have the background of the sidebar show through. - Last Edit: 12 years 1 month ago by Ali Samii.
- Thank you.
Ali Samii
-
-
-
- Ali Samii
- Elite Rocketeer
- Posts: 629
- Thanks: 2
-
Hi Henning...I figured it out. The background of the sidebar-a div was being pouched down by the height of the module div, so it wasn't showing through. It also needed to be z-indexed below the module.
What I did was put a I modified the following lines:
left: 0; right: 0; bottom: -3000px; height: 6000px; z-index: -1;
Since the overflow is hidden, this pushes the height way up so this solves the issue unless the sidebar-a div is about 6000px, in which case the page really is not well designed and a new design consideration is needed.
Thanks,
Ali - Thank you.
Ali Samii
-
-
-
- Ali Samii
- Elite Rocketeer
- Posts: 629
- Thanks: 2
-
I reopened this thread because now I am coming upon a strange behaviour I cannot resolve.
Although I got the background to display behind the Custom HTML module properly, now I have added a 2nd module to the sidebar-a position.
This second module is a RokGallery with a "Showcase Responsive - Light" layout.
The problem I am encountering is that sometimes, the background on the sidebar seems to load a 2nd time. The showcase cycles through images, and if you look at this page betelec.ergonomiq.net/services you will see that the background below the image sometimes is brighter, and you can see that in effect, the background is being displayed a 2nd time.
It doesn't happen on all the images, but on most. And you can see the difference clearly if you watch the images cycle through. A couple of times, when a new image cycles in/out, you will see the bottom half of the background become brighter/darker.
I have no idea how to resolve this, and would appreciate any assistance. - Thank you.
Ali Samii
-
-
-
- Ali Samii
- Elite Rocketeer
- Posts: 629
- Thanks: 2
-
Henning wrote:
I would try to use :last-child ...
Hi Henning, can you give me a sample code?
I assume it would need to go in here somewhere:
@media only screen and (min-width: 768px){ #rt-main div.rt-container [class*="grid"] #rt-sidebar-a .rt-block::after { content: ' '; display: block; position: absolute; left: 0; right: 0;bottom: -3000px; height: 6000px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJklEQVQIHWP8//8/Awzk5+f/ZwAJgHBeXh6QAkoic8ACMBkQB4QBo1YnC60ipIsAAAAASUVORK5CYII=) repeat; } #rt-main div.rt-container { overflow: hidden; } } - Thank you.
Ali Samii
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
try to change the code like this
#rt-main div.rt-container [class*="grid"] #rt-sidebar-a .rt-block:first-child::after {
content: ' ';
display: block;
position: absolute;
left: 0;
right: 0;
bottom: -3000px;
height: 3100px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJklEQVQIHWP8//8/AwzY2Nj8ZwAJgLC1tTWQAkoic8ACMBkQB4QBUNwkp+dxCWwAAAAASUVORK5CYII=) repeat;
z-index: -1;
}
-
Time to create page: 0.050 seconds