Background image and div stay aligned

Hello!

I want to create a hero page, which will have as background an image with a laptop.
I want to have some text over the screen of the laptop, that will stay aligned with the screen of the laptop as the browser grows or shrinks.

As a basic example, I have created this one, in which I would like the red rectangle to always be inside the laptop’s screen: https://codepen.io/pen/?editors=1100

Maybe I should use another approach rather than put the image as background-image?

That link is a blank codepen :slight_smile:

Yep blank codepen :blush:

I take guess

index.html

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>laptop testing</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>
  
 <h1>The laptop display</h1>

 <div id="lorem-ipsum">
  <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
   do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p><p>
   Felis eget velit aliquet sagittis id. Urna pharetra mass mi.
  </p>
 </div>

</body>
</html>

screen.css


body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5 arial, helvetica,  sans-serif;
 }
 h1{
   font-size: 1.25em;
   color: #444;
   text-align: center;
 }
#lorem-ipsum {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 60vw;
   height: 39.6vw;
   margin: auto;
   font-size: 2.5vw;
   background-image: url(https://i.postimg.cc/nz813zMx/laptop.png);
   background-size: 100% auto;
 }
#lorem-ipsum p {
   width: 60%;
   margin: 6vw 0 0;
 }
#lorem-ipsum p:last-of-type {
   margin: 0;
 }
@media ( max-width: 50em) {
 #lorem-ipsum {
   width: 70vw;
   height: 46.2vw;
   font-size: 2.75vw;
  } 
 #lorem-ipsum p {
   margin: 6vw 0 0; 
  }
 }
@media ( max-width: 44em) {
 #lorem-ipsum {
   width: 80vw;
   height: 52.8vw;
   font-size: 3vw;
  }
 #lorem-ipsum p {
   margin: 6.5vw 0 0; 
  }  
 }
@media ( max-width: 37.5em) {
 #lorem-ipsum {
   width: 90vw;
   height: 59.4vw;
   font-size: 3.5vw;
  }
 #lorem-ipsum p {
   margin: 6vw 0 0; 
  }  
 }
@media ( max-width: 31.25em) {
 #lorem-ipsum {
   width: 98vw;
   height: 64.68vw;
   font-size: 4vw;
 }
 #lorem-ipsum p {
   margin: 6vw 0 0; 
  }  
 }
@media ( max-width: 27em) {
 #lorem-ipsum {
   width: 98vw;
   height: 64.68vw;
   font-size: 6vw;
   line-height: 1;
  }
 #lorem-ipsum p {
   position: relative;
   margin: 7vw 0 0; 
  } 
  #lorem-ipsum p:first-of-type::after {
   position: absolute;
   right:-4px;
   content: '..'; 
  } 
 #lorem-ipsum p:last-of-type {
   display: none; 
  }  
 }

Maybe this help little.

1 Like

oups!

Here is a similar pen.

this is the image that I want to use: https://officenter.gr/unlim3/hero-bg.png

Thank you! Yes this is the effect, but if I want to make the background-image with size: cover, it does not work.

Try this:

1 Like

yep it seems great!

although its not fully responsive, when you try to make the window bigger, the text area is not aligned :confused:

I now see it can sometimes fail when you click the window’s restore and maximise buttons. It’s due to whether the scrollbar appears or disappears.

I think this version is much less likely to fail but still can fail:

You could consider using a SVG so the text scales with image. However I have not been able to get that to work as a background image, nor to get object-fit: cover to work with it. See:

1 Like

Your first approach with seems to work very good!

Could you explain me how you generate the numbers like 515, 335 etc.
Because I am trying to make it work with this image: https://officenter.gr/unlim3/hero-bg.png
and “background-position: center top;” so the screen of the laptop will be always visible.
But without luck.

Now no need guess, no need svg, no need javascript.

index.html

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>laptop testing</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>
  
 <h1>The laptop display</h1>

 <div id="screen-text">
  <p>
   Det finnes ikke dårlig vær, bare dårlige klær.
 </p>
 </div>

</body>
</html>

screen.css

html,body {
  margin: 0;
 }
body {
    background-color: #000;
    font: normal 1em / 1.5 arial, helvetica,  sans-serif;
 }
h1 {
   font-size: 1.25em;
   color: #fff;
   text-align: center;
 }
#screen-text {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 98vw;
   height: 55.125vw;
   margin: auto; 
   font-size: 3.5vw;
   background-image: url( https://i.postimg.cc/9fv0cGfk/hero-bg.jpg );
   background-size: 100% auto;
 }
#screen-text p {
   width: 28%;
   margin: 11vw  2vw 0 2vw;
   color: #fff;
   text-align:  center;
 }

nice example, but the background is not “cover top”, so there is gap below the image on smaller screens

This is more or less pixel perfect (without js) but will likely need a single media query for small devices once the screen is smaller than the middle laptop section.

It works by using css variables to size an element to the size the image would be when the value ‘cover’ has been used. This means you can then accurately place an inner element using percentages to the exact point you require and the width and height that will always stay in tune with the section you want to cover even when the window is resized. I thought it impossible at first but unless I’m missing something important it seems to work well. It does require the background image to be centred and at the top but that’s what works best for this demo anyway.

Just tried on my iPhone and works perfectly there also.

1 Like

The image is 515 x 335 pixels and the laptop screen area is 199 x 120 pixels.

The coordinates of the top-left corner of the laptop screen relative to the centre of the image are (-100.5, -38.5).

The ‘if’ statement is comparing the aspect ratio of the image with the aspect ratio of the browser viewport to determine whether CSS ‘contain’ is fitting the width or the height of the image into the width or the height of the viewport. The position and dimensions of the <div> are then determined accordingly.

2 Likes

yep this one seems to work really good!

thank you!!

1 Like

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