Image heeft links en rechts een witte balk

Status
Niet open voor verdere reacties.
Y

yourservice

Gebruiker
Lid geworden
22 jan 2009
Berichten
35
Hallo,

Ik heb een achtergrond gemaakt voor mijn website waarop ik een plaatje wil laten zien.

Dat is beide gelukt alleen nu heeft het plaatje links en rechts een witte balk, m.a.w. niet alleen het plaatje is zichtbaar maar ook een balk over mijn achtergrond heen.

Kan dat ook "getrimd" worden? Zodat het plaatje én de achtergrond zichtbaar zijn?

Wilfred
 
Hallo Aar,

Het is een plaatje van 500x500 pixels, er zit dus geen wit om het plaatje heen.

Doordat het plaatje over de achtergrond heen komt, gecentreerd op de pagina, valt de achtergrond weg links en rechts van het plaatje.

Wilfred

Eerst zo:

Screen Shot 372.JPG

En na scrollen, plaatje verdwijnt dus naar boven:

Screen Shot 373.JPG
 
Laatst bewerkt:
Kan je het op JSfiddle zetten?
 
Eerst zo: /afbeelding/
En na scrollen, plaatje verdwijnt dus naar boven: /afbeelding/
Klik om te vergroten...
Mijn gevoel zegt dat je het op jouw scherm goed wilt hebben, maar iemand anders heeft een ander scherm met een andere resolutie.
Met andere woorden: als het op jouw scherm in orde is dan is het niet in orde op andere schermen.

Er zijn responsive oplossingen waarbij de afbeelding dynamisch in grootte verandert, afhankelijk van de resolutie van het scherm.
Hiervoor is wel meer info nodig hoe je de afbeelding wilt hebben, en ook welke html en css je nu gebruikt.
 
Ideetje voor background (bg) en de pagina tekst (no-bg). Voorbeeld op jsfiddle gezet.
De "no-bg" en de "bg" moeten direct onder <body> staan.
Code: 
html

<body>
  <div class="no-bg">
    <h1>Hallo</h1>
    <p>Tekst Tekst Tekst Tekst</p>
    <p>Tekst Tekst Tekst Tekst</p>
  </div>
  <div class="bg">
    <img src="foto.jpg" alt="">
  </div>
</body>

css

html, body {
    height: 100%;
    margin: 0;
}
.bg, .no-bg {
    min-height: 100%;
    box-sizing: border-box;
}
.bg {
    position: absolute;
    top:0; right:0; left:0;
    z-index: -999;
}
.bg img {
    width: 100%;
    height: auto;
    border: 0;
}
 
Laatst bewerkt:
Geen idee wat JSFiddle is en hoe het werkt maar hier is mijn code.

Code: 
<!DOCTYPE html>
<html>

<style>
body, html {
  height: 100%;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* The image used */
  background-image: url('https://website.nl/images/image.jpg');

  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
}

/* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}

.responsive {
  width: 100%;
  height: auto;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 10%;
}

</style>

<img id="weekdayimg" src="" width=200px class="center">

<script>

let dayoftheweekUri;
switch (new Date().getDay()) {
  case 0:
    dayoftheweekUri = "https://website.nl/images/sunday.jpg";
    break;
  case 1:
    dayoftheweekUri = "https://website.nl/images/monday.jpg";
    break;
  case 2:
    dayoftheweekUri = "https://website.nl/images/tuesday.jpg";
    break;
  case 3:
    dayoftheweekUri = "https://website.nl/images/wednesday.jpg";
    break;
  case 4:
    dayoftheweekUri = "https://website.nl/images/thursday.jpg";
    break;
  case 5:
    dayoftheweekUri = "https://website.nl/images/friday.jpg";
    break;
  case 6:
    dayoftheweekUri = "https://website.nl/images/saturday.jpg";
}

// Daarna vervangen we het van image element met id "weekdayimg" de src waarde
// en wordt het betreffende figuur getoond.
document.getElementById("weekdayimg").src= dayoftheweekUri;
</script>
<body>

	<div class="bg-image"></div>

</body>

</html>
 
JSfiddle is een 'zandbak' voor HTML/CSS en JS.
Maar met wat zoeken had je dat wel uitgevonden.
 
Aar zei:
JSfiddle is een 'zandbak' voor HTML/CSS en JS.
Maar met wat zoeken had je dat wel uitgevonden.
Klik om te vergroten...

Dat is inderdaad gelukt Aar, een live testomgeving. Kan ik dan de code daar zo uit de adresbalk kopiëren en dan de link hier plakken?
 
Als je het opgeslagen hebt door op Save te drukken, dan kan je die link hier delen.
 
De style hoort in een apart bestand die in de <head> wordt gelinkt.
De style wordt gelinkt als stylesheet in regel 5 van de html.

Het script moet onderaan vlak boven </body> worden gezet.
De reden is dat de browser daar de <img> kan vinden, zie regel document.getElementById("weekdayimg")

Om het helemaal netjes te maken hoort het script eigenlijk ook in een apart bestand (hier niet gedaan).

html bestand:
Code: 
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Mijn website</title>
</head>
<body>

<img id="weekdayimg" src="" width="200" class="center">
<div class="bg-text">
  <h1>Hallo</h1>
</div>
<div class="bg-image"></div>

<script>
// ==> Let op: script moet vlak boven </body> staan.
// Afhankelijk van dagnummer krijgt dayoftheweekUri een uri.
let dayoftheweekUri;
switch (new Date().getDay()) {
  case 0:
    dayoftheweekUri = "https://website.nl/images/sunday.jpg";
    break;
  case 1:
    dayoftheweekUri = "https://website.nl/images/monday.jpg";
    break;
  case 2:
    dayoftheweekUri = "https://website.nl/images/tuesday.jpg";
    break;
  case 3:
    dayoftheweekUri = "https://website.nl/images/wednesday.jpg";
    break;
  case 4:
    dayoftheweekUri = "https://website.nl/images/thursday.jpg";
    break;
  case 5:
    dayoftheweekUri = "https://website.nl/images/friday.jpg";
    break;
  case 6:
    dayoftheweekUri = "https://website.nl/images/saturday.jpg";
}
// De src van image met id "weekdayimg" vervangen met dayoftheweekUri.
document.getElementById("weekdayimg").src= dayoftheweekUri;
</script>

</body>
</html>

De style hoort in een stylesheet (style-bestand), dit bestand heb ik hier de naam: style.css gegeven.
In regel 5 van de html wordt de stylesheet (bestand "style.css") gelinkt aan de html.
Code: 
html, body  {
  height: 100%;
  margin: 0;
}
* {
  box-sizing: border-box;
}
.bg-image {
  /* Full height */
  height: 100%;

  /* The image used */
  background-image: url('https://website.nl/images/image.jpg');

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  
  /* Black w/opacity/see-through */
  background-color: rgba(0,0,0, 0.4);

  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

/* Position text in the middle of the page */
.bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  padding: 20px;
  border: 3px solid #f1f1f1;
  /* Black w/opacity/see-through */
  background-color: rgba(0,0,0, 0.4);
  color: white;
  font-weight: bold;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
}

.responsive {
  width: 100%;
  height: auto;
}

.center {
  display: block;
  width: 10%;
  margin-left: auto;
  margin-right: auto;
}
 
Laatst bewerkt:
JSfiddle is een 'zandbak' voor HTML/CSS en JS.
Klik om te vergroten...
Bij jsfiddle kan je voor plaatjes het beste kiezen voor een "placeholder". Dan ben je niet afhankelijk van map- of bestandsnaam op je eigen website. De 2 getallen in het linkje is de afmeting, en het laatste woord kan je aanpassen: animal, cat, paris, number, kitchen (enzovoort).
Code: 
<img src="https://loremflickr.com/800/600/cat" alt="">
 
Dankjewel bron, alles zo gedaan maar de image van de background wordt ineens niet meer gevonden, de link werkt echter wel.

Moet die vanuit een .css bestand anders worden aangeroepen?
 
yourservice zei:
Dankjewel bron, alles zo gedaan maar de image van de background wordt ineens niet meer gevonden, de link werkt echter wel.

Moet die vanuit een .css bestand anders worden aangeroepen?
Klik om te vergroten...

Hoe staat die in je CSS?
 
Een vraag oplossen kan alleen als de opbouw van de code goed is.
Ik heb nog niet gekeken naar de werking zoals je die wilt hebben.

In welk programma schrijf je de code?
Deze vraag omdat bijvoorbeeld in Kladblok het bestand wordt opgeslagen als style.css.txt (het moet zijn: style.css)
 
Laatst bewerkt:
Hallo bron en Aar,

Ik heb letterlijk jouw tekst overgenomen bron, uiteraard wel de website en bestandsnaam aangepast, dat zeg ik, de link werkt.

Ik gebruik TextPad maar de .css heb ik letterlijk in FileZilla, op de site zelf, gemaakt.

Wilfred
 
Ik neem wel dat je de URL bij background-image aangepast hebt?
En als je https gebruikt, laad je geen afbeelding via http in?
 
Ik heb letterlijk jouw tekst overgenomen bron, uiteraard wel de website en bestandsnaam aangepast, dat zeg ik, de link werkt.
Klik om te vergroten...
Ik weet niet hoe je het eruit wilt laten zien maar dit is een opzetje voor een tekst op een achtergrond
 

Bijlagen

Je kan een foto nooit met background-size:cover goed krijgen omdat cover een foto smaller of breder maakt totdat het schermvullend is. De foto zal dus vervormen. Bij de andere mogelijkheid (background-size:contain) blijft de foto in orde maar krijg je lege randen buiten de foto.

Er is een oplossing: Centreer de foto in het midden van het scherm. Maak met Javascript de foto dusdanig groot dat deze schermvullend is. Afhankelijk van het scherm zullen er altijd delen van de foto buiten beeld vallen.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan