Background size not full

1

Guys, i’ve already made a post about this problem, but noone had and answer… Can anyone have a closer look, cause i cant find the solution.
Here is my picture:

kreslin
kreslin1342×579 97.6 KB

HTML:


<head>
   <link href="https://fonts.googleapis.com/css?family=Ewert|Great+Vibes|Shojumaru" rel="stylesheet">
</head>

<div id="slika1">

<div class="container">
<div class="jumbotron">
<h1>PREKMURJE</h1> 
  
</div>
</div>
 

<div>
 <ul>
  <li><a href="#s1">Domov</a></li>
  <li><a href="#s2">Zgodovina</a></li>
  <li><a href="#s3">Znamenitosti</a></li>
  <li><a href="#s4">Galerija</a></li>
</ul>
  </div>

<header id="s1">


<div class="container">
  <h3>O prekmurju</h3>

   <p><big>Prekmurje je nižinska pokrajina na skrajnem severovzhodnem delu Slovenije, ob meji z Avstrijo in Madžarsko, na levem bregu reke Mure, po kateri je tudi dobila ime. Pokrajina je večinoma poljedelska, večji mesti pa sta Murska Sobota in Lendava.

Prekmurje je bilo vedno in je še vedno gospodarsko in politično odmaknjeno od ostalih slovenskih pokrajin. Zaradi geografske lege in politike je bilo mnogo bolj podvrženo raznarodovalnim vplivom od konca 11. stoletja dalje. Prekmurje je pretežno ravninska pokrajina. Geografsko je razdeljeno na tri območja: hribovnato področje severno od Murske Sobote je Goričko; vzhodno proti Muri leži Ravensko, jugovzhodno od Murske Sobote pa leži Dolinsko. Okrog Lendave pa je manjše gričevnato področje Lendavske gorice.

Najvišji vrh Prekmurja - Kugla (418 mnm) leži v naselju Sotin.

  Površina Prekmurja je 948,48 km².<big></p>
      </header></div>

<div class="container">
<div class="jumbotron">
<iframe width="560" height="315" src="https://www.youtube.com/embed/jpaXuSi2Tmw"

        </div>
  </div>
  </div>

CSS:


h1 {
margin: 0px;
position:relative;
bottom: 15px;
text-align: center;
font-family: Ewert; 
color: #004d00;
font-size: 70px;}

h3 {
text-align: center;
padding-top: 30px;
font-size: 50px; }

ul {
    list-style-type: none;
    margin: 0px;
    padding: 0;
    background-color: #f1f11;
   font-family: Shojumaru;
   overflow: hidden;
   text-align: center; 
   border: 5px double;
   }

li  {
  display: inline-block;
}     

li a {
    display: inline-block;
    color: white;
     text-decoration: none;
    font-size: 20px;
    }

li a:hover:not(.active) {
    background-color: grey;
}

a {
margin: 10px;
}
   
h3{
float: middle;
font-family: Great Vibes;
position: relative;
bottom: 30px;}


div {
padding-top: 25px;}
p {
float: center;
padding-right: 100px;
  padding-left: 100px;
padding-bottom: 100px;
position: relative;
bottom: 55px;
text-shadow: white 0px 0px 10px;

    }
 
.container {
text-align: center;}


iframe {
position:relative;
bottom:50px;
}

#slika1 {
background: url("http://globalmedicalco.com/photos/globalmedicalco/26/126088.jpg");
background-size: auto 100%;
background-repeat: no-repeat;
padding: 25px;
 }
2

Any idea why my ‘‘youtube’’ isnt on the background picture?

3

Hello !

What do you mean “youtube” doesn’t appear in the background ? Where is it supposed to appear ?

4

i said background picture… Its below my picture on white background

5

I’ve merged your topics together. I understand that it’s frustrating to not receive an answer, but don’t create duplicate topics. It doesn’t help anyone.

6

Your video appears below your background because that’s how it is in the markup.

<div id="slika1">
  <!-- This div holds your background image  -->
</div> <!-- This closes your background image -->

<div class="container"> <!-- Everything here is outside of your slika1 container -->
  <div class="jumbotron">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/jpaXuSi2Tmw"> <!-- This is your video -->
   </div>
</div>

If you want your video to appear over your background image, it needs to be in the same container. You could either move your video, or make the background appear on a different element.

<div id="slika1">
    <!-- video in the div with the background -->
    <iframe width="560" height="315" src="https://www.youtube.com/embed/jpaXuSi2Tmw">
</div>

or

/* the background image will be under everything */
body {
    background: url("http://globalmedicalco.com/photos/globalmedicalco/26/126088.jpg");
    background-size: auto 100%;
    background-repeat: no-repeat;
    padding: 25px;
}
7

Sorry for multiple posts, but i was desperate to find an answer… But if u look at ma code again. u will notice that i actually put the closing tag of my <div picture after my video, which means my video has to be included on the background picture, but it isnt…it simply isnt…But lets make everything short… What i am trying to basically do is make multiple background images (one after one) for each navigation on the same site… Is this even possible?

8

No, you put a closing </div> after your video, but you’ve actually closed your container on line 37. The closing tag on line 45 isn’t doing anything.

  <div id="slika1">
  <!-- stuff -->
  Površina Prekmurja je 948,48 km².<big></p>
      </header></div> <!-- this closes div#slika1 -->

if you don’t believe me, you can click the code folding triangle on the left of your <div>. It will hide everything inside that element.

08%20PM

You’ll see that your container closes fully and the video is not inside.

32%20PM
32%20PM786×261 19.6 KB

Or you can count the number of <div> and </div> tags in your markup. They should be the same, but they won’t be.

This is your first project, so there’s a lot to learn. It looks like you’re doing great and your site is coming together. Focus on making your code clean and tidy. Make sure everything is indented properly and while you’re learning, you can keep track of open/closing elements with comments.

<div class="container">
  <div class="jumbotron">
    <h1>This is a great site</h1>
  </div> <!-- close jumbotron -->
</div> <!-- close container -->

You can also click on the arrow in the top right corner of your editor windows. There will be a “Tidy HTML” option that you should use from time to time. Let the computer fix indentation for you. The “Analyze HTML” option will show you other problems that you may have missed. Do the same with CSS. This is very important because it prevents bugs like the one you’re having now.

Last tip: you need to include Bootstrap if you want to use Bootstrap classes (container, jumbotron, etc.). Here’s a video that shows you how to do this:

9

Thanks for showing me that, and i do see that ive closed my picture before my video if i click on that arrow, but i still dont see what is the point, because line 37 closes my <p text, so basically that on line 37 closes both (my picture, and <p…text) this is what confuses me a lot. And ive counted my <div elements and they are equal (7-7) …That closing tag on line 37 is doing two jobs… closing my picture, and closing my container… Click on both arrows and u will notice that… Something is really strange here or am missing out on something big

10

Alright, that was a bit of a mystery, but I’ve found the solution. On line 24, you start a <header>, and then on 27 you start <div class="container">. Because you started the header before the container, you should be closing the container before the header.

This is what you should have

<header id="s1">
    <div class="container">
        <!-- some stuff -->
    </div> <!-- end container -->
</header> <!-- end header -->

However, your div and header are switched around, so you actually have

<header id="s1">
    <div class="container">
        <!-- some stuff -->
    </header> <!-- end header -->
</div> <!-- end container -->

HTML does not throw many errors, so if there’s a problem with your markup it will just silently fail like it has been. Once you switch these around, your page should start looking like you want it to.

Remember, keeping things clean will prevent these bugs. Here’s what your code looks like after it’s been organized.

31%20PM
31%20PM1109×692 80.1 KB

1 Like
11

aw, i totally understand it now… Thank you so much for explaining that to me.