Text in blue background spreading horizontally across WHOLE screen

HTML & CSS
1

Hello,
Can you please kindly help me?
I am editing a free template (originally it was for lawyer firm but I have converted the texts for my private use because I love the minimalistic design). I need to make the blue horizontal stripe (with the white text inside) in the upper part of the webpage to spread across the WHOLE screen (“run out” of the left and right edge of the screen no matter what the screen resolution is). The alignment of the text must of course remain the same as is.

www.zdravotnipomoc.cz/

Any solution would be highly appreciated (no matter whethe it will or will not involve insertin of a new div)

Maybe this link can help

Thank you very much.
Jan

2

Hi,

For modern browsers (ie9+) and resolutions up to 2790px you could use box-shadow without needing to change the html.

e.g. Add this.

#pitch p{
	margin-right:-400px;
	padding-right:400px;
	/* 930px matches the max-width of the element - it can't be bigger than the element or the shadow moves away = 3 x 930  = 2790px max */
	-webkit-box-shadow: 930px 0px #338FFF, -930px 0px 0px #338FFF;
	-moz-box-shadow:   930px 0px 0px #338FFF, -930px 0px 0px #338FFF;
	box-shadow:        930px 0px 0px #338FFF, -930px 0px 0px #338FFF;
}
3

Hello Paul,
many thanks for your help.
I am going to try it. Hopingly, it will work.¨
Thank you again.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.