Ik heb een website (g-floors.eu) en ik wil de achtergrond (in css heb ik een bg-afbeelding voor de inhoud gedefinieerd) ook responsive maken. Helaas heb ik echt geen idee hoe ik dit moet doen, behalve één ding dat ik kan bedenken, maar het is nogal een tijdelijke oplossing. Meerdere afbeeldingen maken en vervolgens de css-schermgrootte gebruiken om de afbeeldingen te wijzigen, maar ik wil weten of er een meer praktische manier is om dit te bereiken.
Wat ik eigenlijk wil bereiken, is dat de afbeelding (met het watermerk ‘G’) automatisch wordt vergroot/verkleind zonder dat er minder van de afbeelding wordt weergegeven. Als het kan natuurlijk
link: g-floors.eu
Code die ik tot nu toe heb (inhoudsgedeelte)
#content {
background-image: url('../images/bg.png');
background-repeat: no-repeat;
position: relative;
width: 85%;
height: 610px;
margin-left: auto;
margin-right: auto;
}
Antwoord 1, autoriteit 100%
Als u wilt dat dezelfde afbeelding wordt geschaald op basis van de grootte van het browservenster:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
Stel geen breedte, hoogte of marges in.
BEWERKEN:
De vorige regel over het niet instellen van breedte, hoogte of marge verwijst naar de oorspronkelijke vraag van OP over schalen met de venstergrootte. In andere gevallen kunt u eventueel de breedte/hoogte/marges instellen.
Antwoord 2, autoriteit 19%
door deze code gaat je achtergrondafbeelding naar het midden en repareer je de grootte, ongeacht je div-grootte verandert, goed voor kleine, grote, normale formaten, het beste voor iedereen, ik gebruik het voor mijn projecten waar mijn achtergrondgrootte of div-grootte kan veranderen
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
Antwoord 3, autoriteit 15%
Probeer dit:
background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
Antwoord 4, autoriteit 9%
CSS:
background-size: 100%;
Dat zou moeten lukken! 🙂
Antwoord 5, autoriteit 6%
Hier is sass mixin voor responsieve achtergrondafbeelding die ik gebruik. Het werkt voor elk block-element. Natuurlijk kan hetzelfde werken in gewone CSS, u hoeft alleen de paddinghandmatig te berekenen.
@mixin responsive-bg-image($image-width, $image-height) {
background-size: 100%;
height: 0;
padding-bottom: percentage($image-height / $image-width);
display: block;
}
.my-element {
background: url("images/my-image.png") no-repeat;
// substitute for your image dimensions
@include responsive-bg-image(204, 81);
}
Voorbeeld http://jsfiddle.net/XbEdW/1/
Antwoord 6, autoriteit 5%
Dit is een makkelijke =)
body {
background-image: url(https://domains.com/photo.jpeg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
Bekijk de jsFiddle-demo
Antwoord 7, autoriteit 4%
Dit is de beste manier die ik heb gevonden.
#content {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:cover;
}
Controleer op de w3schools
Meer beschikbare opties
background-size: auto|length|cover|contain|initial|inherit;
Antwoord 8, autoriteit 3%
#container {
background-image: url("../images/layout/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100vh;
margin: 3px auto 0;
position: relative;
}
Antwoord 9, autoriteit 2%
Ik gebruikte
#content {
width: 100%;
height: 500px;
background-size: cover;
background-position: center top;
}
wat heel goed werkte.
Antwoord 10, autoriteit 2%
Responsieve website door opvulling toe te voegen aan onderste afbeelding hoogte/breedte x 100 = padding-bottom %:
http://www.outsidethebracket.com/responsive-web -design-fluid-background-images/
Meer gecompliceerde methode:
http:// voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratio’s
Probeer het formaat van de achtergrond te wijzigen eq Firefox Ctrl + M om een magisch mooi script te zien, denk ik het beste:
http://www.minimit.com/demos/fullscreen- backgrounds-with-centered-content
Antwoord 11
U kunt dit gebruiken. Ik heb het getest en het werkt 100% correct:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100%;
background-position:center;
U kunt uw website met responsiviteit testen met deze schermgroottesimulator:
http://www.infobyip.com/testwebsiteresolution.php
Wis uw cache elke keer dat u wijzigingen aanbrengt en ik gebruik liever Firefox om het te testen.
Als je een afbeelding van een andere site/URL wilt gebruiken en niet zoals:
background-image:url('../images/bg.png');
//Deze structuur is om de afbeelding van uw eigen gehoste server te gebruiken.
Gebruik dan als volgt:
background-image: url(https://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;
Veel plezier 🙂
Antwoord 12
Als je wilt dat de hele afbeelding wordt weergegeven, ongeacht de beeldverhouding, probeer dan dit:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;
Hiermee wordt de hele afbeelding weergegeven, ongeacht de schermgrootte.
Antwoord 13
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#res_img {
background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
width: 100%;
height: 500px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
border: 1px solid red;
}
@media screen and (min-width:300px) and (max-width:500px) {
#res_img {
width: 100%;
height: 200px;
}
}
</style>
<div id="res_img">
</div>
Antwoord 14
Slechts twee regels code, het werkt.
#content {
background-image: url('../images/bg.png');
background-size: cover;
}
Antwoord 15
Adaptief voor vierkante verhouding met jQuery
var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;
if(HW<1){
$(".background").css("background-size","auto 100%");
}
else if(HW>1){
$(".background").css("background-size","100% auto");
}
Antwoord 16
background:url("img/content-bg.jpg") no-repeat;
background-position:center;
background-size:cover;
of
background-size:100%;
Antwoord 17
Ik denk dat dit de beste manier is om dit te doen:
body {
font-family: Arial,Verdana,sans-serif;
background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}
Op deze manier is het niet nodig om niets meer te doen en het is vrij eenvoudig.
Tenminste, het werkt voor mij.
Ik hoop dat het helpt.
Antwoord 18
Probeer background-sizemaar met behulp van twee argumenten één voor de breedte en de andere voor de hoogte
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width
// and the second will be the height.
background-position:center;
Antwoord 19
background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;
De eigenschap Positie kan worden gebruikt om de bovenkant en het midden uit te lijnen volgens uw behoefte en achtergrondafmetingen kunnen worden gebruikt voor middencrop (omslag) of volledig beeld (bevattend of 100%)