Why can i no longer align any of the images on my website, since i added a background image?

Hey,

My image “header-image” was previously aligned to the right of my page. However when I added in the background image, it’s now messed with my layout. It’s also moved the x4 links from my nav, which were previously aligned to the left of the page, inline with my header-image.

Please see screenshot of what I am working on below:

Screenshot 2020-05-03 at 23.30.13|690x391

I’ve tried floating the image in CSS to the right, also using ‘align’ within the img it’s wrapped in. But neither seem to be working.

Anyone know what the problem is? I’m extremely stumped.

HTML CODE:

<!doctype html>
<html>

	<head>
		<title>💗 shannonkelseyann</title>
		<link href="homepage.css" rel="stylesheet" type="text/css" />
	</head>

	<body>

		<header>

			<nav>
				<h1><img class="header-image" src="https://i.imgur.com/Nj06vm2.gif" alt="Image" height="65" width="650" align="right"></h1>
				<ul>
					<img class="home-image" src="https://i.imgur.com/c2UQ8om.png" alt="index">
					<a href="advertising.html"><img class="campaign-image" src="https://i.imgur.com/cQE71uK.png" alt="camp"></a>
					<a href="e-commerce.html"><img class="ecomme-image" src="https://i.imgur.com/01tEvO3.png" alt="ecomme"></a>
					<a href="info.html"><img class="info-image" src="https://i.imgur.com/JjNQ54R.png" alt="info"></a>
				</ul>
			</nav>

		</header>


		<footer><p style="text-align: center;">© 2020 by shannonkelseyann <p style="text-align: right;"></footer></p>

	</body>
</html>

CSS CODE:

body {
	background-image: url(../portfolio/background.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 100vh;
	height: 100vh;
	background-position: center center;
	position: relative;

}

header h1 {
	display: inline;

}

nav ul {

	display: inline;
}

nav ul li {
	display: inline-block;
}

footer {
	clear: both;
	color: white;
	font-family: arial;
	font-size: 10pt;
	display: bottom center;

}

Hello @java7488985522, welcome to the forums. I haven’t as yet found the cause, however another thing you might want to look at is this

You are opening the <p> inside the <footer>, however, you are closing the <footer> inside the <p>. You might want to rearrange that so the </footer> and </p> are in the order they opened.

Hey,

I shall amend that now. Hasn’t solved the other issue sadly, but good to know as I’m pretty new to this.

Thank-you!

1 Like

Hello @java7488985522!! :grinning:

Perhaps it is obvious and I am missing it, but which image are you trying to float?

Your CSS does not include the float command.

<h1><img class="header-image" src="https://i.imgur.com/Nj06vm2.gif" alt="Image" height="65" width="650" align="right"></h1>

Good morning :)! Please see the quote above where it says “align right” this is how it was previously set up and it was working.

(Isn’t included in this thread) but i have also tried on CSS

.header-image {
float: right;
}

Which sadly wont work either. I am going crazy.

1 Like

Have you tried setting it to !important
Maybe your <h1> CSS is effecting it.

I actually don’t think it needs to be in an <h1> element since <h1> is only for text, and you don’t have anything except the image there.

So would I set it like this in CSS:

.header-image {
float: right !important;
}

If so, I just tried this and it hasn’t worked. I’ve also removed the

FIXED!

It was a simple case of amending the background-width within body in CSS.

previous:

body {
background-image: url(…/portfolio/background.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100vh;
height: 100vh;
background-position: center center;
position: relative;

}

UPDATED:

body {
background-image: url(…/portfolio/background.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100vw;
height: 100vh;
background-position: center center;
position: relative;

}

Thank-you for trying to help!

1 Like