Tekst en button over background image gooien

Door Daan s op 07-03-2018 10:38 gewijzigd op 07-03-2018 11:25

2.412 views

Sup People,

Just a question. Ik ben bezig met een afbeelding :).
Niet zomaar een, maar een background-img in de css.

Nu wil ik er een button op plaatsen (ben ik mee bezig), en wat tekst.
Wat is de beste manier om dit te doen :)

html
<?php

<div id="row-2" class="row">
<div class="flexer-container">
<div class="col-12 md-col-12">
<p>dgdf dfg dfg df dfg dfg</p>
<button>Mijn button</button>
</div>

?>

css
<?php
.home article .row:last-of-type {
width: auto;
position: relative;
text-align: center;
color: purple;
//background: pink;
height: 620px;
background-position:center;
background-image:url('http://via.placeholder.com/1920x1080');

}

?>

- Ariën -

07-03-2018 11:18

Waarom zou je niet voor een <button> gaan?

Daan s

07-03-2018 11:27

Ik ga ook voor de button haha

J Jan te Pas

07-03-2018 12:39

Je zet de background in de body of html. De button(s) kun je overal dan neer gaan zetten waar je wilt. Onderstaand een voorbeeld voor de achtergrond op te nemen in de CSS.


body{
	background-color:#fff;
	font-family: "Magra", sans-serif;
	font-size: 15px;
	color:white;
	margin:0 auto;
	height:100%;
	background: url(Dirty_Blue.jpg) no-repeat center center fixed; 
       -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

}

En ja, er moet één button op, "JA IK WIL KOPEN!"

Daan s

07-03-2018 13:09

Het is alleen geen body tag, maar een div :)

Thomas van den Heuvel

07-03-2018 13:58

Wat bedoel je met "beste manier"? Er is geen technische belemmering om gewoon een button weer te geven over een background-image? Hier hoef je niets speciaals voor te doen. Wat betreft het estetische aspect: jij bent de ontwerper :p.

Wellicht zou je uit oogpunt van zoekmachine-optimalisatie de afbeelding uit de (CSS) achtergrond kunnen trekken en een omschrijvende bestandsnaam en alttekst kunnen geven ofzo en wellicht wel meer truuks om extra metadata aan een afbeelding op te hangen. In dat geval zou je de button over de afbeelding heen kunnen plaatsen met behulp van z-indexen. Op deze manier haal je waarschijnlijk "meer kilometers" uit een afbeelding en krijgt deze echt betekenis in plaats van dat het enkel een opmaak-element is.

Reageren

Inloggen om te reageren