Содержание
HELP: Flexbox Layout — Background Image
I am experimenting with the CSS Flexbox project using my own content. I am stuck on trying to make a background image fit the full length of the banner area with no white space, using Flexbox.
Please find below the HTML:
html> head> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Best City Guidetitle> link href='https://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'> link rel="stylesheet" href="base.css"> link rel="stylesheet" href="flexbox.css"> head> body> header class="main-header"> h1 class="name">a href="#">Dr Katherine Dandridgea>h1> ul class="main-nav"> li>a href="#">HOMEa>li> li>a href="#">TREATMENTSa>li> li>a href="#">ABOUTa>li> li>a href="#">CONTACTa>li> li>a href="#">BLOGa>li> ul> header> div class="banner"> img class="bg-img-cover" src="img/background-image.png" alt="nature"> h1 class="headline">Dr Katherine Dandridgeh1> span class="tagline">Practitioner of Chinese Medicinespan> div> div class="row"> div class="primary col"> img class="feat1-img" src="img/acu.png" alt="Acupuncture"> h2>TCM Acupunctureh2> p>TCM Acupuncture sessions with Katherine are available in 50min, 1hr 20min and 1hr 50min. Every session includes a consultation whereby a decision will made on the best approach for the session. Treatment may include bodywork, acupuncture, acupressure, gua sha scraping therapy, cupping and moxibustion.p> a class="button" href="#">Learn Morea> div> div class="secondary col"> img class="feat2-img" src="img/facial.jpg" alt="Facial Rebirth"> h2>Facial Rebirthh2> p>Embark on this treatment journey by releasing and harmonising energy in the paraspinal points on the back prior to a full acupuncture facial enhancement treatment. Body points to address your internal root picture within and facial points to transform your facial musculature, lines and skin texture for a truly restored and revitalised appearance. p> a class="button" href="#">Learn Morea> div> div class="tertiary col"> img class="feat3-img" src="img/coaching.png" alt="Future Self Sessions"> h2>Future Self Sessionsh2> p>Future Self sessions are available in 50min, 1hr 20min and 1hr 50min. These health mindset strategic coaching sessions tackle head on what is really getting in your way with regards to your health and wellbeing. By using traditional methods of breathwork and visualisation and cutting edge techniques you will emerge from the polarities holding you back.p> a class="button" href="#">Learn Morea> div> div> footer class="main-footer"> span>©2018 Dr Katherine Dandridge.span> footer> body> html> /* ================================= Base Element Styles ==================================== */ * box-sizing: border-box; > body font-family:'PT Sans', sans-serif; line-height: 1.6; color: #000000; margin: 0; > ul margin: 0; padding: 0; list-style: none; > p font-size: .95em; margin-bottom: 1.8em; > h2, h3, a color: #000000; > h2, h3 margin-top: 0; > a text-decoration: none; > img max-width: 100%; > /* ================================= Base Layout Styles ==================================== */ /* ---- Navigation ---- */ .name font-size: 1.35em; margin: 0; > .main-nav margin-top: 5px; > .name a, .main-nav a text-align: center; display: block; padding: 10px 15px; > .main-nav a font-size: .95em; color: #000000; text-transform: uppercase; > .main-nav a:hover color: #c7e1c7; > /* ---- Layout Containers ---- */ .main-header padding-top: .5em; padding-bottom: .5em; > .banner, .main-footer text-align: center; > .banner color: #fff; padding: 0; margin: 0; margin-bottom: 50px; > .col padding-right: 1em; padding-left: 1em; > .main-footer background: #c7e1c7; padding: 2em 0; margin-top: 30px; > /* ---- Page Elements ---- */ .logo width: 190px; > .headline margin-bottom: 0; > .feat1-img, .feat2-img, .feat3-img border-radius: 5px; > .button color: #FFFFFF; text-align: center; padding: .625em 1.25em; background: #c7e1c7; border-radius: .35em; > /* ================================= Media Queries ==================================== */ @media (min-width: 769px) .main-header, .row width: 90%; margin: 0 auto; > .tagline font-size: 1.4em; > > @media (min-width: 1025px) .main-header, .row width: 80%; max-width: 1150px; > >
/* ================================= Base Styles ==================================== */ body display:flex; flex-direction: column; min-height: 100vh; > .row flex: 1; > /* ================================= Media Queries ==================================== */ @media (min-width: 769px) .main-header, .main-nav, .row, .col, .banner display: flex; > .col flex: 1 50%; flex-direction: column; > .button margin-top: auto; align-self: center; > > @media (min-width: 1025px) .main-header flex-direction: row; justify-content: space-between; > >
CSS background image in flex container
The following tutorial shows you how to use CSS to do «CSS background image in flex container».
CSS Style
The CSS style to do «CSS background image in flex container» is
.box !-- w ww . d e m o 2s . c o m --> display:flex; top:80px; position:relative; padding-top:30px; border-top:thin solid black; border-bottom:thin solid black; border-right:thin solid black; border-left:thin solid black; > .box1 < padding-left:300px; padding-right:30px; width:630px; flex-direction:column; align-self:flex-start; > .smalltitle2 < border-bottom:medium solid black; background-image:url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-news-bite.png"); background-repeat:no-repeat; background-size:contain; >
HTML Body
body> div >"box"> div >"box1"> div >"smalltitle2"> Mother of Three Buys Tuna Steak at Phish Concert. Leaves, "Feeling Funny." The following iframe shows the result. You can view the full source code and open it in another tab.
html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> .box !-- ww w . d em o 2 s .c o m --> display: flex; top: 80px; position: relative; padding-top: 30px; border-top: thin solid black; border-bottom: thin solid black; border-right: thin solid black; border-left: thin solid black; > .box1 < padding-left: 300px; padding-right: 30px; width: 630px; flex-direction: column; align-self: flex-start; > .smalltitle2 < border-bottom: medium solid black; background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-news-bite.png"); background-repeat: no-repeat; background-size: contain; > body> div >"box"> div >"box1"> div >"smalltitle2">Mother of Three Buys Tuna Steak at Phish Concert. Leaves, "Feeling Funny." Related
- CSS background-image gradient and border-line on bigger element
- CSS background-image gradient and border-line on bigger element (Demo 2)
- CSS background image in :after element
- CSS background image in flex container
- CSS background-image in IMG elements not displaying in IE
- CSS background-image in IMG elements not displaying in IE (Demo 2)
- CSS Background-image is not showing after porting from html to html5
demo2s.com | Email: | Demo Source and Support. All rights reserved.
Html+CSS. FlexBox и фоновый рисунок для секции. Шрифты
Здравствуйте! Помогите, пожалуйста, разобраться с фоновым рисунком для секции и шрифтами.
Код в css и html, а также этот же код здесь https://jsfiddle.net/z01bcfje/. Под текстом будет код.
Фоновый рисунок (1920×1280) для секции не подгружается (а другие картинки подгружаются), к сожалению. Причем независимо от того — где лежит картинка — в папке, а работает или если ссылка ведет на хостинг для хранения фото. Другие картинки получается организовать, а вот фоновый рисунок — нет.
Я хочу научиться помещать картинку в отдельные боксы как фон для бокса, а также в флекс-контейнеры как фон для контейнера.
Также не очень понимаю — как в флекс-боксах настраивать стили для шрифтов, они почему-то не меняются совсем никак, даже цвет.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
html lang="ru"> head> meta charset="UTF-8"> title>Структура/title> link rel="stylesheet" href="css/main.css"> /head> body> div class="row align-items-center justify-content-center"> div class="my-flex-container-3"> div class="box-1"> h2>Box 1/h2> p> Может когда-нибудь у меня получится разобраться в html и css /p> /div> div class="box-2"> /div> /div> div class="my-flex-container-4"> div class="box"> h2>Box 1/h2> p> Проверяем блоки 2/p> /div> div class="box"> h2>Box 2/h2> p> Проверяем блоки 2/p> /div> /div> /div> div class="flex-container"> div class="my-flex-container-2"> p> a href="https://yandex.ru">img src="img/иконка_whatsapp.png" alt="" style="width: 50px" >/a>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
body { padding: 0; margin: 0; color: #222222; height: 740px; font-size: ; background: url(hps://a.***********/a32/2010/27/1dc9e7ed99c5t.jpg) no-repeat center top / cover; } .flex-container { flex-direction: row; margin-top: 10px; } .my-flex-container-2 { display: flex; color: rgb(0, 6, 255); /* темный ультрамалиновый, фиолетовый*/ margin-bottom: 30px; flex-direction:row; justify-content: center; align-items:center; } .my-flex-container-3{ display: flex; align-items: center; /* background-image: url(https://a.***********/a32/2010/27/1dc9e7ed99c5t.jpg) no-repeat center top / cover; */ background-repeat:no-repeat; background-position: center 64px; width: 1366px; height:990px; padding:16px; margin:0 auto; } .my-flex-container-4{ display: flex; align-items: center; } .my-flex-container-3, .my-flex-container-4 div{ padding: 10px; border: 2px solid silver; background-image: url(img/stok.jpg) no-repeat center top / cover; } .box-1{ flex: 1; border: 3px solid red; } .box-2{ flex: 2; border: 3px solid green; background: url(https://a.***********/a32/2010/27/1dc9e7ed99c5t.jpg) no-repeat center top / cover; } .box{ background-image: url(hps://a.***********/a32/2010/27/1dc9e7ed99c5t.jpg) } .box-1 { font color: white; } .H2 {color: white;}