{"id":511,"date":"2013-10-04T17:41:46","date_gmt":"2013-10-04T15:41:46","guid":{"rendered":"http:\/\/www.h-hennes.fr\/blog\/?p=511"},"modified":"2013-10-04T17:41:46","modified_gmt":"2013-10-04T15:41:46","slug":"background-de-site-cliquable-en-css","status":"publish","type":"post","link":"https:\/\/www.h-hennes.fr\/blog\/2013\/10\/04\/background-de-site-cliquable-en-css\/","title":{"rendered":"Background de site cliquable en css"},"content":{"rendered":"

J’ai r\u00e9cemment recherch\u00e9 comment rendre le background d’un site cliquable de mani\u00e8re simple, apr\u00e8s pas mal de recherche je n’ai rien trouv\u00e9 qui correspondait exactement \u00e0 ce que je voulais.
\nMon objectif \u00e9tant d’avoir un habillage cliquable un peu comme sur le site du figaro ou de la redoute.<\/p>\n

Voici une structure de base de background cliquable en css<\/a><\/p>\n

Voici le code html de la page, tr\u00e8s simple.<\/p>\n

<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">\r\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=iso-8859-1\" \/>\r\n<title>Example habillage de site web<\/title>\r\n<link href=\"habillage.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\r\n<\/head>\r\n\r\n<body>\r\n<div id=\"habillage_site\">\r\n<a href=\"#\"><img src=\"images\/img-trans.png\" \/><\/a>\r\n<\/div>\r\n<div>\r\n<div>\r\n<p>Menu de gauche<\/p>\r\n<ul>\r\n<li>Item 1<\/li>\r\n<li>Item 2<\/li>\r\n<li>Item 3\u00a0\u00a0\u00a0\u00a0 <\/li>\r\n<\/ul>\r\n<\/div>\r\n<div>\r\n<h2>Contenu du block principal <\/h2>\r\n<p>Contenu page <\/p>\r\n<\/div>\r\n<div>\r\n&copy; H-hennes 2013\r\n<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
On rajouter le bloc dans lequel on veut mettre l’image de fond cliquable juste en dessous de la balise <body>
\nA l’int\u00e9rieur de ce bloc on va mettre une image transparente, sur laquelle on va appliquer le lien souhait\u00e9.<\/p>\n
Voici \u00e0 pr\u00e9sent le code css de la page<\/p>\n
\/* Structure basique *\/\r\nbody {background-color:#CCC;color:#000;}\r\n.col-left{float:left;width:200px;background-color:#EEE;}\r\n.content {float:left;width:780px;background-color:#777;}\r\n.footer {clear:both;width:980px;background-color:#AAA;margin-top:15px;}\r\n\r\n\/*Css sp\u00e9cifique pour background cliquable *\/\r\n#habillage_site {position:fixed;width:100%;height:100%;top:0;left:0;background-position:top center;background-repeat:no-repeat;background-image:url('images\/background.jpg');}\r\n#habillage_site img {width:100%;height:100%;}\r\n.container {width:980px;margin:auto;border:1px solid #000;position:relative;}<\/pre>\n
Dans le css on mets un place une image de fond sur notre div #habillage_site, et on adapte la taille de l’image contenue dans la div \u00e0 la taille de l’\u00e9cran.
\nPour finir il est important de mettre l’attribut position: relative pour la div container pour qu’elle reste bien au-dessus de notre div d’habillage.<\/p>\n","protected":false},"excerpt":{"rendered":"
J’ai r\u00e9cemment recherch\u00e9 comment rendre le background d’un site cliquable de mani\u00e8re simple, apr\u00e8s pas mal de recherche je n’ai rien trouv\u00e9 qui correspondait exactement \u00e0 ce que je voulais. Mon objectif \u00e9tant d’avoir un habillage cliquable un peu comme sur le site du figaro ou de la redoute. Voici une structure de base de […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[6],"tags":[251,58,250],"class_list":["post-511","post","type-post","status-publish","format-standard","hentry","category-trucs-et-astuces","tag-backgound-cliquable","tag-css","tag-habillage-cliquable"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t