CODEWITHSUNDEEP
htmlcssreactjsbackground-image
Jon Th
Jon Th

Reputation: 377

How to elongate a css background image to the right without stretching and distorting it?

I'm developing a react web application using react-bootstrap and I'm currently making a navbar that has this background image. The white area is the transparent area. Later I will add clickable items in this banner in the far right part of it:

Navbar

This banner is at the top of the page and I want it to stretch to the right, all the way to the end of the page. However, I don't want the logo and page name (under the red marker lines) to stretch and distort.

How do I do that with css background magic? I could perhaps create a version of this background image that's simply so long that no windows will ever surpass it, but I don't think that's the best solution.

Upvotes: 1

Views: 68

Answers (1)

Burham B. Soliman
Burham B. Soliman

Reputation: 1562

checkout this code it might do what exactly u need open this snipped full screen to c the effect

.fgdiv {
position:fixed;
left:0;
background: url("https://i.sstatic.net/HNsuh.png");
background-size: auto 100%;
background-repeat: no-repeat;
z-index:1;
width:100%;
text-align:center;
color:red;
}

.bgspan {
position:fixed;
float:right;
width:100%;
height:19px;
top:16px;
background: black;
z-index:-1;
}
<div class="container">
<div class="fgdiv">text to be shown<br><br>
</div>
<span class="bgspan"></span>
</div>

Upvotes: 1

Related Questions