google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1648 from google/issue-1403 

blog template: Make background image smaller and responsive
master
Addy Osmani 2015-10-01 14:18:21 +01:00
parent acc80d6e45 b24bbd53f9
commit 86f7a19902
5 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
templates/blog/images/bg.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 MiB

BIN
templates/blog/images/bg_1024.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
templates/blog/images/bg_2048.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 257 KiB

BIN
templates/blog/images/bg_2880.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 503 KiB

20
templates/blog/styles.css
View File

@ -1,5 +1,4 @@
body::before {
background-image: url('images/bg.jpg');
background-size: cover;
background-attachment: fixed;
content: '';
@ -11,7 +10,24 @@ body::before {
top: 0;
position: fixed;
}
@media (max-width: 512px) and (min-resolution: 1.5dppx),
(max-width: 1024px) and (max-resolution: 1.5dppx) {
body::before {
background-image: url('images/bg_1024.jpg');
}
}
@media (min-width: 513px) and (max-width: 1024px) and (min-resolution: 1.5dppx),
(min-width: 1025px) and (max-width: 2048px) and (max-resolution: 1.5dppx) {
body::before {
background-image: url('images/bg_2048.jpg');
}
}
@media (min-width: 1025px) and (min-resolution: 1.5dppx),
(min-width: 2049px) and (max-resolution: 1.5dppx) {
body::before {
background-image: url('images/bg_2880.jpg');
}
}
body .demo-blog {
font-family: 'Roboto', 'Helvetica', sans-serif;
}