How to get fullwidth image on top

i have had the quest to get a fullwidth image as a banner beneath the header.
Ok i tried to place a colorsection with section background and some css but i did not get it right.

So i decided to put in a color section an image and want to reach my aims this way.

i set a css class for colorsection ( fullimg) and one for the image (flipimg (this is for the next part) )
colorsection with no styling – no borders – no padding !

.fullimg .container {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.responsive .fullimg .container {
    max-width: 100% !important;
    width: 100% !important;
}

.fullimg .avia-image-container-inner {
    display: block !important;
    max-height: 70vh;
    overflow: hidden;
}

.fullimg img {
    width: 100%;
}

on big screens with high res it is sometimes nice to have the overflow on top and not on the bottom – there is a little trick with css and transform

.flipimg .avia-image-container-inner {
  -webkit-transform: rotate(180deg);
  -moz-transform:    rotate(180deg);
  -ms-transform:     rotate(180deg);
  -o-transform:      rotate(180deg);
  transform:         rotate(180deg);
  zoom: 1;
}

.flipimg img {
float: right;
-webkit-transform: rotate(180deg);
-moz-transform:    rotate(180deg);
-ms-transform:     rotate(180deg);
-o-transform:      rotate(180deg);
transform:         rotate(180deg);
zoom: 1;
}

im amazed that this works on IE8 too

have a look at that playground and make browserwindow bigger and smaler
http://webers-testseite.de/enf01/

If someone got an easier way to do it f.e. with color section background please tell me

• This topic was modified 9 years, 6 months ago by Guenni007.