Please help with this mobile code!


#1

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!


#2

#3

#4

Try going to w3schools.com and see if that helps


#5

Link: https://www.w3schools.com/howto/howto_css_full_page.asp


#6

Thank you for your response! I am trying to figure out how to get a full
bleed mobile image to be contained within the window of mobile. For
reference, please look at [link in profile] on mobile and that might explain
it better than I am!

Thank you for any help you may be able to offer!


#7

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


#8

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.