MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 12: | Line 12: | ||
padding: 10px; | padding: 10px; | ||
} | } | ||
/* Clear floats after the columns */ | /* Clear floats after the columns */ | ||
Line 25: | Line 26: | ||
width: 100%; | width: 100%; | ||
} | } | ||
} | |||
.hero-image { | |||
background-image: url("photographer.jpg"); /* The image used */ | |||
background-color: #cccccc; /* Used if the image is unavailable */ | |||
height: 500px; /* You must set a specified height */ | |||
background-position: center; /* Center the image */ | |||
background-repeat: no-repeat; /* Do not repeat the image */ | |||
background-size: cover; /* Resize the background image to cover the entire container */ | |||
} | |||
.hero-text { | |||
text-align: center; | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
transform: translate(-50%, -50%); | |||
color: white; | |||
} | } |
Revision as of 15:51, 27 April 2021
/* CSS placed here will be applied to all skins */ * { box-sizing: border-box; } /* Create three equal columns that floats next to each other */ .column { float: left; width: 33.33%; padding: 10px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column { width: 100%; } } .hero-image { background-image: url("photographer.jpg"); /* The image used */ background-color: #cccccc; /* Used if the image is unavailable */ height: 500px; /* You must set a specified height */ background-position: center; /* Center the image */ background-repeat: no-repeat; /* Do not repeat the image */ background-size: cover; /* Resize the background image to cover the entire container */ } .hero-text { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; }