Здравейте! Бих искала да ви помоля за съвет относно това как да направя тройния бекграунд към задачата. Как процедирахте вие? На три различни елемента ли приложикте градиента, синия цвят и изображението от ресурсите? Как позиционирахте? Успяхте ли да разположите картинката на цял екран, без да остават бели полета отстрани? Благодаря! :)
Това ми е кода:
<!DOCTYPE html>
<html>
<head>
<title>SoftUni Hawaii Vacation</title>
<link rel="stylesheet" href="css/2-Hawaii-Vacation.css">
</head>
<body>
<main>
<h1>SoftUni Hawaii Party!</h1>
</main>
</body>
</html>
В CSS файла на html тага съм задала radial-gradient направен от тук - http://www.colorzilla.com/gradient-editor/ със светло жълто, бяло, още по-светло жълто и светло синьо; задала съм и no-repeat, width: 900px и height: 600px;
В body тага съм изредила изображенията както в демото с овцете, отново съм задала width 900px и hight 600px, no-repeit, display: inline-block, margin: 0, padding: 0 (за да може background-a да съвпадне с небето) и background-posicion в някакви проценти, отново както е в демото с овцете. Първоначално зададох 50% на всички, след което в браузъра си поиграх да ги наглася по местата им, копирах вече новите проценти и ги замених в CSS файла. И така остава само стилизацията на <h1>, което е лесно - text-align: right, font-size, някакъв margin, color и съответния шрифт.
PS: Прикачвам снимка от браузъра, за да придобиете представа за кои точно проценти говоря - http://picbg.net/img.php?file=a89e094ccab1d804.png
Успех!
Направи го с :before и :after
Здравейте и от мен. Аз също бих искала помощ относно това как се прави background от няколко елемента едновременно. Какви ли не начини пробвах и не мога да се справя и да получа това което се иска в задачата. Последното нещо което опитах е да направя таг в html и след това в css някак си да го задам като заден фон на картинката, но нищо не ми се получи(като изобщо не съм сигурна дали има такъв вариант). Ще съм благодарна, ако някой се включи и опише работещ начин за изпълнение. Благодаря и аз предварително. :)