Pesquisar na Comunidade

Estou com problema em um site que somente no iOS não faz o carregamento da imagem através de URL em css o css do home >>> - a imagem na url somente não carrega no iOS, funciona normalmente em todos navegadores, em Android, Windows Phone e OS (batendo cabeça com isso) #home { width: 100%; height: 100%; background-color: #f9628f; background-image: url(../images/hero-bg.jpg); background-repeat: no-repeat; background-position: center 50%; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-attachment: fixed; min-height: 804px; position: relative; } #home .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .2; background-color: #19191b; } .home-content-table { width: 100%; height: 100%; display: table; position: relative; text-align: center; } .home-content-tablecell { display: table-cell; vertical-align: middle; z-index: 500; } .home-content-tablecell .row { position: relative; padding-top: 16.2rem; padding-bottom: 15rem; } .home-content-tablecell h3 { font-family: "montserrat-bold", sans-serif; font-size: 2.2rem; color: white; text-transform: uppercase; letter-spacing: .3rem; margin: 0 0 .9rem 0; } .home-content-tablecell h1 { font-family: "montserrat-bold", serif; font-size: 9rem; line-height: 1.133; color: #FFFFFF; } .home-content-tablecell .more { margin: 4.8rem 0 0 0; } .home-content-tablecell .more .button { border-color: #FFFFFF; color: #FFFFFF; } /* home social-list */ .home-social-list { position: absolute; left: 48px; bottom: 54px; margin: 0; padding: 0; list-style: none; font-size: 2.4rem; line-height: 1.75; text-align: center; } .home-social-list::before { display: block; content: ""; width: 2px; height: 42px; background-color: rgba(255, 255, 255, 0.3); margin-left: auto; margin-right: auto; margin-bottom: 12px; } .home-social-list li { padding-left: 0; } .home-social-list li a, .home-social-list li a:visited { color: #FFFFFF; } .home-social-list li a:hover, .home-social-list li a:focus, .home-social-list li a:active { color: #151515; } /* scroll down */ .scrolldown { position: absolute; bottom: 0; right: 0; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: right top 0; -ms-transform-origin: right top 0; transform-origin: right top 0; float: right; } .scrolldown i { padding-left: 9px; } .scrolldown a:hover, .scrolldown a:focus, .scrolldown a:active { color: #151515 !important; } html[data-useragent*='MSIE 10.0'] .scrolldown, .oldie .scrolldown { display: none; } .scroll-icon { display: inline-block; font-family: "montserrat-bold", sans-serif; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .3rem; color: #FFFFFF !important; background: transparent; position: relative; top: 36px; right: 42px; -webkit-animation: animate-it 3s ease infinite; animation: animate-it 3s ease infinite; } /* vertical animation */ @-webkit-keyframes animate-it { 0%, 60%, 80%, 100% { -webkit-transform: translateX(0); } 20% { -webkit-transform: translateX(-5px); } 40% { -webkit-transform: translateX(20px); } } @keyframes animate-it { 0%, 60%, 80%, 100% { -webkit-transform: translateX(0); } 20% { -webkit-transform: translateX(-5px); } 40% { -webkit-transform: translateX(20px); } } /* ------------------------------------------------------------------- * responsive: * home section * ------------------------------------------------------------------- */ @media only screen and (max-width: 1200px) { .home-content-tablecell h3 { font-size: 2.1rem; } .home-content-tablecell h1 { font-size: 7rem; } } @media only screen and (max-width: 1024px) { .home-content-tablecell h3 { font-size: 2rem; } .home-content-tablecell h1 { font-size: 6rem; } } @media only screen and (max-width: 768px) { .home-content-tablecell .row { max-width: 600px; } .home-content-tablecell h3 { font-size: 1.8rem; } .home-content-tablecell h1 { font-size: 5.2rem; } .home-content-tablecell h1 br { display: none; } .home-social-list { left: 36px; bottom: 30px; font-size: 2.1rem; } .home-social-list::before { height: 30px; } .scrolldown .scroll-icon { font-size: 1.2rem; top: 24px; right: 10px; } } @media only screen and (max-width: 600px) { #home { min-height: 702px; } .home-content-tablecell .row { max-width: 480px; padding-top: 12rem; padding-bottom: 12rem; } .home-content-tablecell h3 { font-size: 1.5rem; } .home-content-tablecell h1 { font-size: 4.2rem; } } @media only screen and (max-width: 500px) { .home-content-tablecell .row { max-width: 420px; } .home-content-tablecell h3 { font-size: 1.4rem; } .home-content-tablecell h1 { font-size: 4.0rem; } .home-social-list { left: 30px; bottom: 30px; font-size: 1.8rem; } .home-social-list::before { height: 24px; } } @media only screen and (max-width: 400px) { #home { min-height: 654px; } .home-content-tablecell .row { padding-top: 4.8rem; padding-bottom: 10.8rem; } .home-content-tablecell h3 { font-size: 1.4rem; } .home-content-tablecell h1 { font-size: 3.6rem; } }

Qual interface vocês estão utilizando para criar doc. HTML, CSS e Javascript? Fui atras do Coda, mas $75 esta um pouco longe do que eu pretendia pagar. Sei que possivelmente deve valer o preço, mas alguém tem alguma outra dica de um bom editor HTML? Qual é o melhor na sua opinião?

Pessoal, To precisando de uma ajuda, na verdade quero saber de alguém que entenda bastante de CSS se é possível fazer o que eu quero. Estou fazendo um site, e no rodapé vai ter um "Acesso Rápido" para os menus, onde vai ter os mesmo menus existentes lá em cima do site. O que eu queria era que ao passar o mouse sobre um item de menu, uma imagem que está a esquerda aumentasse de tamanho. A imagem e o menu estão na mesma div. Já dei uma pesquisada e não consegui achar nada a respeito já que a propriedade :hover age somente no objeto selecionado. Caso tenha ficado dificil de entender, vou citar um exemplo com o próprio fórum. Imaginemos que ao passar o mouse sobre os botões "MacMagazine", "Membros" ou "Fórum", o logotipo da Macmagazine que está em cima desses menus aumentasse de tamanho. Espero que tenha ficado claro. Fico no aguardo.