Problem with image-background

1

Hi, I have problem with my image-background. When I hold ctrl and scroll down I can see multiple of my body image-background? Any ideas? Sorry for my stupid questions but I am learning. :slight_smile:

HTML:

Welcome to my portfolio
  1. Who am I?
  2. What I can offer?
  3. My Curriculum vitae
  4. Contact me

Who am I?

Hi! Welcome to my portfolio. My name is Simon. I finished Maria Curie-Sklodowska University in Lublin. In Poland well known as UMCS :). I graduated Management with Brand Image Strategic Management. Then I tried my hand at the army. It was fantastic experience. After that, meanwhile I worked in a few jobs as recruiter or customer service specialist. Unfortunately, I was not happy working there and I desired to change my life and do something new. Something what makes my life more valuable. I decided to be front-end developer.

CSS:

body
{background-image:url(http://www.wallpapers4u.org/wp-content/forum/uploads/room_office_desk_chair_shelves_39161_1920x1080.jpg);
font-family: ‘Josefin Sans’, sans-serif;
margin:0;
}
header
{font-size:60px;
text-align:center;
font-weight:700;
color:#555;
margin-top:30px;
}

.naw
{height:80px;
width:100%;
background-color:#666567;
opacity:0.8;
text-align:center;

}

ol
{list-style-type:none;

}
ol>li
{display:inline-block;
padding:22px;
font-size:28px;
padding-top:30px;
border-right: 1px solid #dddddd ;
}

ol>li:first-child
{border-left: 1px solid #dddddd ;
}

.img
{
border:ridge 2px #fdfdfd;
width:130px;
height:185px;
dislpay:inline-block;

}

ol>li:hover
{background-color:#555247;
cursor:pointer;

}

#content
{background-image:url(http://www.wallpapers4u.org/wp-content/forum/uploads/table_office_chairs_glass_window_39163_1920x1080.jpg);
width:1920px;
height:1080px;
margin-top:890px;
position:relative;
}

p
{
font-size:24px;

}

#who
{width:800px;
margin-left:auto;
margin-top:auto;
text-align:center;

}
.head
{margin-top:30px;
position:absolute;
text-align:center;

}
Thank you

2

hey Szymon, I think what you want here is background-repeat: no-repeat inside your #content selector, to prevent the background image from repeating.

3

I tried it but my naviagation bar goes beyond my layout. I made div which is located under body tag and embraces the rest content and in css I gave this div background-image. It helped but then was another problem. My layout wasnt sticked to the top frame of my browser. Then I gave my div position: absolute and top:0px. It helped. Now I am fighting with another problem. I have problem with middle spacing my text. Try this code and you will understand my problem. Try scroll down with holding ctrl. Thank you

4

Could you send me a Codepen with your work that I can inspect ?

5

I made it. But I have another problem :slight_smile: Please check https://codepen.io/szymon91/pen/XVdozz . I have problem with not working display:block; in my nav bar. Could you help me?

6

I’m not too sure what your issue is, but perhaps it has to do with the <naw> tag that you have. Did you mean to use <nav> (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav)?

7

It is about that I have to hover over and click the writing e. g. “Who am I” to go destined section. I would like to hover over

  • .
    • 8

    hover over tag li in the nav tag