Please help with this mobile code!

I have a website with full bleed horizontal images and I am trying to contain them as such on mobile - the effect I am going for is seen on [link in profile].

PLEASE HELP! I am getting so frustrated!

Thanks!

Not sure the earlier answer addressed your needs, so let’s first determine what is meant by ‘full bleed images’. Is the below to what you refer?

https://support.blurb.com/hc/en-us/articles/207795236-Full-bleed-images-and-layouts-in-BookSmart

1 Like

Got to playing with this and haven’t come much closer to a stable layout but the findings are interesting, and perhaps upon which to build…

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>full bleed image</title>
  <style>
  body {
    font-size: 100%;
    background-image: url(digger_in_the_valley.jpg);
    background-size: cover;
    margin: 0;
  }
  #wrapper {
    width: auto;
    height: 100%;
    border-width: 5rem;
    border-color: rgba(191, 127, 255, 0.15);
    border-style: solid;
    box-sizing: border-box;
  }
  div div {
    margin: 100% auto;
  }
  </style>
</head>
<body>
  <div id="wrapper">
    <div></div>
  </div>
</body>
</html>
digger_in_the_valley.jpg

Save both files to the same folder and click on the html.

1 Like