Need help- CSS - Need Image To Fill...

User 228273 Photo


Registered User
32 posts

Need help- CSS - Need Image To Fill Div Without left margin, any help will be greatly appreciated

Need image to fill from left to right, no margins

HTML
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<link rel="stylesheet" href="css/coffeegrinder.min.css">
<link rel="stylesheet" href="css/wireframe-theme.min.css">
<link rel="stylesheet" href="css/main.css">
</head>

<body>
<div class="row row-1">
<header class="coffee-span-12 header"></header>
<div class="coffee-span-12 banner">
<img class="image-3-2 image-1" src="img/1.jpg" alt="Image">
</div>
<div class="coffee-span-12 content">
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
</div>
</body>

</html>


CSS
/* Image Elements */

img.image-3-2.image-1 {
display: block;
max-width: none;
position:fixed;



}

/* Layout Elements */

body > .row > [class*='coffee-span-'].header {
background-color: #e05ce0;
position:fixed;
z-index:20;
}

body > .row > [class*='coffee-span-'].banner {
background-color: #74bfe8;
}

body > .row > [class*='coffee-span-'].content {
min-height: 850px;
background-color: #d9ed68;
position:relative;
top:500px;
}

body > .row.row-1 {
max-width: none;
width: auto;
}


Files also uploaded http://stream8media.com

Thank you for any help with this..
User 122279 Photo


Senior Advisor
14,447 posts

Try removing position: fixed; from the image.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 187934 Photo


Senior Advisor
20,181 posts

Hi Craig,
Go back to RLM and remove the padding that is set on the row the image is in. You have 8px of padding on each side.
Please only post your question in one forum. I deleted your other one.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 228273 Photo


Registered User
32 posts

Eric, thank you very much, I won't let you know how much pain I am in from kicking myself on missing that one:-)
Appreciate the heads up on double posting, but to be honest, I actually tied to close the other post in "Web Design" but I could not find the way how to close an open post, a tip on how to do that would be good, cheers.

padding..kick kick kick:-)
User 187934 Photo


Senior Advisor
20,181 posts

It happens. Sometimes I'll just delete and say nothing. It was just a friendly reminder because some users don't understand the dynamics of a forum. It's easy to post a question and forget where you actually posted it. Been there done that.:lol:
Glad you have it working.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.