Сделать снимок экрана шириной (по центру)

Я хотел бы иметь изображение на моей главной странице на новом сайте, покрывая общую ширину и заставляя его изменять размер в зависимости от вашего разрешения, но все равно иметь его по горизонтали.Сделать снимок экрана шириной (по центру)

Это сайт я работаю на данный момент: http://jonathan.ohrstrom.nu, и я хочу, чтобы вся красная часть будет покрыта этим изображением: http://jonathan.ohrstrom.nu/style/img/featured.jpg

Как я могу это сделать? Это код CSS У меня есть для DIV я хочу изображение в:

.featured { 
    background-color: red; 
    width: 100%; 
    height: 700px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
}

Я попытался это, но безуспешно:

.featured { 
    background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg) no-repeat; 
    width: 100%; 
    height: 700px; 
    size: cover; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
}

Но это просто не загрузить изображение на всех. Без no-repeat то изображение охватывает всю ширину, но она повторилась ..

источник

2016-12-03 Jonathan Öhrström

попробовать сделать это как этот

.featured { 
    background: url('http://jonathan.ohrstrom.nu/style/img/featured.jpg') no-repeat center center ; 
    background-size: cover; 
    z-index: 1; 
    }

источник

2016-12-03 17:56:29

Это было! Спасибо –

приветствуются –

Использование background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg);background-size: 100% 100%;

/* GRUNDER */ 
 
body { 
 
\t background-color: white; 
 
\t font-family: verdana; 
 
} 
 

 
/* MENY */ 
 
.menu_wrapper { 
 
\t width: 100%; 
 
\t height: 70px; 
 
\t background-color: rgba(45, 45, 45, .9); 
 
\t left: 0; 
 
\t top: 0; 
 
\t position: fixed; 
 
\t z-index: 99; 
 
} 
 
.menu_content { 
 
\t width: 1000px; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t /*background-color: red;*/ 
 
\t line-height: 70px; 
 
\t color: #a0a0a0; 
 
\t font-weight: 400; 
 
\t font-family: 'Roboto', sans-serif; 
 
\t text-transform: uppercase; 
 
} 
 
.menu_logo { 
 
\t float: left; 
 
} 
 
.menu_links { 
 
\t float: right; 
 
} 
 

 
a.menu { 
 
\t color: #a0a0a0; 
 
\t transition: .1s; 
 
\t text-decoration: none; 
 
} 
 
a.menu:hover { 
 
\t color: #e5a000; 
 
} 
 

 
ul.menuList { 
 
\t list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
li { 
 
\t float: left; 
 
\t display: inline; 
 
\t margin: 0 10px; 
 
} 
 

 
/* CONTAINER */ 
 
.container { 
 
\t width: 1000px; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t z-index: 1; 
 
} 
 
.featured { 
 
    background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg); 
 
    background-size: 100% 100%; 
 
    width: 100%; 
 
    height: 700px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
}

<html><head> 
 
<title>Webutveckling!</title> 
 
<!-- META TAGS --> 
 
<meta name="description" content="En webbyrå som skapar responsiva och smarta websidor åt större och mindre företag!"> 
 
<meta name="keywords" content="webutveckling,webbyr�,svensk,stockholm,billig"> 
 

 
<!-- CSS LINKS 
 
<link rel="stylesheet" href="http://jonathan.ohrstrom.nu/style/style.css"> --> 
 
<link rel="stylesheet" href="http://jonathan.ohrstrom.nu/style/font-awesome/css/font-awesome.min.css"> 
 
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,500i" rel="stylesheet"></head> 
 
<body> 
 
\t <a name="top"></a> 
 
\t 
 
\t <!-- MENY --> 
 
\t <div class="menu_wrapper"> 
 
\t 
 
\t \t <div class="menu_content"> 
 
\t \t \t 
 
\t \t \t <div class="menu_logo"> 
 
\t \t \t \t *LOGO HÄR* 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="menu_links"> 
 
\t \t \t \t <ul class="menuList"> 
 
\t \t \t \t \t <li><a href="#top" class="menu">hem</a></li> 
 
\t \t \t \t \t <li><a href="#about" class="menu">info</a></li> 
 
\t \t \t \t \t <li><a href="#projekt" class="menu">projekt</a></li> 
 
\t \t \t \t \t <li><a href="#kontakt" class="menu">Kontakt</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t </div> 
 
\t 
 
\t </div> 
 
\t 
 
\t <!-- WELCOME-BILD --> 
 
\t <div class="featured"></div> 
 
\t 
 
\t <div class="container"> 
 
\t </div> 
 
\t 
 
\t <a name="about"></a> 
 
\t 
 
\t 
 
\t <!-- jQuery --> 
 
    <script src="http://jonathan.ohrstrom.nu/js/jquery.js"></script> 
 
\t 
 
\t <script> 
 
\t \t $('a').click(function(){ 
 
\t \t \t $('html, body').animate({ 
 
\t \t \t \t scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top 
 
\t \t \t }, 500); 
 
\t \t \t return false; 
 
\t \t }); 
 
\t </script> 
 

 
</body></html>

источник

2016-12-03 17:57:33 jafarbtech

Вот что я вам предлагаю:

.featured { 
    background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center center; 
    width: 100%; 
    height: 700px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
}

Вы можете сделать много с CSS свойства фона:

Установить цвет с Hex из RGB.
Установите изображение с url() или фоновым изображением одного свойства.
Центрируйте изображение по горизонтали и по вертикали с процентами или верхними/центральными/нижними атрибутами. Вы также можете установить его с исходным положением свойства.
Вы также можете установить повтор изображения с атрибутами repeat/no-repeat. Он также имеет свое собственное свойство: background-repeat.
Установите размер изображения со значением или размером фона фона. Вы также можете использовать это свойство для масштабирования изображения в контейнере, как вы хотите, с помощью обложки или содержимого.
Вы можете сделать намного больше, см. Это link для получения дополнительной информации о фон.

источник

2016-12-03 18:00:03

Сделать снимок экрана шириной (по центру)

ответ

Смежные вопросы