Responsywne obrazy tła css
Mam stronę internetową (g-floors.eu) i chcę, aby tło (w css zdefiniowałem obraz bg dla treści) również było responsywne. Niestety naprawdę nie mam pojęcia, jak to zrobić, z wyjątkiem jednej rzeczy, którą mogę wymyślić, ale to całkiem obejście. Tworzenie wielu obrazów, a następnie używanie rozmiaru ekranu css do zmiany obrazów, ale chcę wiedzieć, czy jest bardziej praktyczny sposób, aby to osiągnąć.
W Zasadzie to co chcę osiągnąć to to, że obraz (z znak wodny "G") automatycznie zmienia rozmiar bez wyświetlania mniejszej ilości obrazu. Jeśli to możliwe oczywiście
Link: g-floors.eu
Code I have so far (content part)
#content
{
background-image: url('../images/bg.png');
background-repeat: no-repeat;
position: relative;
width: 85%;
height: 610px;
margin-left: auto;
margin-right: auto;
}
17 answers
Jeśli chcesz, aby ten sam obraz był skalowany w zależności od rozmiaru okna przeglądarki:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
Nie ustawiaj szerokości, wysokości ani marginesów.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-26 19:51:02
Przez ten kod obraz tła go wyśrodkować i naprawić go rozmiar niezależnie od zmiany rozmiaru div, dobre dla małych, dużych, normalnych rozmiarów, najlepiej dla wszystkich, używam go do moich projektów, w których mój rozmiar tła lub rozmiar div może zmienić
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-16 20:37:05
Spróbuj tego:
background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-17 22:43:35
CSS:
background-size: 100%;
To powinno wystarczyć! :)Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-30 18:42:03
Oto sass mixin dla responsywnego obrazu tła, którego używam. Działa dla dowolnego elementu block
. Oczywiście to samo może działać w zwykłym CSS, wystarczy ręcznie obliczyć padding
.
@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);
}
Przykład http://jsfiddle.net/XbEdW/1/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-25 15:57:10
To najlepszy sposób, jaki mam.
#content {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:cover;
}
Sprawdź na w3schools
Więcej dostępnych opcji
background-size: auto|length|cover|contain|initial|inherit;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-22 05:20:21
To jest proste=)
body {
background-image: url(http://domains.com/photo.jpeg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
Spójrz na jsfiddle demo
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-24 00:28:48
Użyłem
#content {
width: 100%;
height: 500px;
background-size: cover;
background-position: center top;
}
Co zadziałało naprawdę dobrze.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-14 22:17:27
Responsywna strona poprzez dodanie paddingu do dołu obrazka wysokość / szerokość x 100 = padding-bottom %:
Http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/
Bardziej skomplikowana metoda:
Http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
Spróbuj zmienić rozmiar tła EQ Firefox Ctrl + M, aby zobaczyć magiczny ładny skrypt myślę, że najlepiej jeden:
Http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-27 00:13:39
Jeśli chcesz, aby cały obraz był wyświetlany niezależnie od proporcji, spróbuj tego:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;
To pokaże cały obraz bez względu na rozmiar ekranu.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-10 13:51:40
#container {
background-image: url("../images/layout/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100vh;
margin: 3px auto 0;
position: relative;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-14 22:12:20
Możesz tego użyć. Przetestowałem i działa w 100% poprawnie:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100%;
background-position:center;
Możesz przetestować swoją stronę z responsywnością w tym symulatorze rozmiaru ekranu: http://www.infobyip.com/testwebsiteresolution.php
Wyczyść pamięć podręczną za każdym razem, gdy wprowadzasz zmiany i wolałbym użyć Firefoksa, aby go przetestować.
Jeśli chcesz użyć obrazka z innej strony / URL, a nie jak:
background-image:url('../images/bg.png');
// Ta struktura polega na użyciu obrazu z własnego hostowanego serwera.
Następnie użyj jak to:
background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;
Enjoy:)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-26 15:07:15
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-03 15:09:53
Tylko dwie linijki kodu, to działa.
#content {
background-image: url('../images/bg.png');
background-size: cover;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-25 11:02:07
Adaptive for square ratio with 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");
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-15 10:10:01
background:url("img/content-bg.jpg") no-repeat;
background-position:center;
background-size:cover;
Lub
background-size:100%;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-08 14:24:16
Myślę, że najlepszym sposobem na to jest to:
body {
font-family: Arial,Verdana,sans-serif;
background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}
W ten sposób nie ma potrzeby nic więcej robić i jest to dość proste.
Przynajmniej na mnie działa.
Mam nadzieję, że to pomoże.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-25 13:18:54