Cómo crear un borde de patrón alrededor de la página web, espacio cuadrado

Estoy tratando de crear un borde específico alrededor de una página de espacio cuadrado para que responda (no quiero agregar una imagen ya que no se adaptaría a otros dispositivos) Esto es lo que espero:

marcos web

Actualmente solo puedo obtener un borde doble sólido que llegue a los bordes de la página con un espacio mínimo entre las líneas, aproximadamente la mitad de lo que espero.

Hasta ahora, este es el código que he insertado en el css personalizado:

#footer {display:none;}
body {
border: 1em double #ffffff;
padding: 0px;
margin: 0px;
background-image: url(http://i.imgur.com/LhxKJpU.jpg);
background-repeat: tile; 

}

La plantilla que estoy usando es Pacific.

¿¿Algunas ideas??

¿Quieres que las líneas tengan un ancho fijo? O porcentaje? ¿El patrón de cruz está en cada esquina o solo en la parte inferior derecha?
Idea rápida: superponga una forma bordeada diferente en cada esquina. Podría hacerlo con pseudoelementos en el encabezado y el pie de página, o algo así. Haré una prueba más tarde.
Hola @Zach Saucier, quiero que tengan un ancho fijo y el patrón de cruz es para cada esquina. No estoy seguro de cómo hacer pseudo-elementos...

Respuestas (1)

No puede hacer eso directamente con CSS sobre la etiqueta del cuerpo directamente, ha reestructurado su cuerpo html para lograr el efecto deseado.

Todo lo que tiene que hacer es cuatro DIV diferentes superpuestos entre sí y cada DIV trata con un solo borde, DIV para tener solo un borde en la posición superior y el otro en la posición correcta y así sucesivamente.

aquí está mi solución:

<head>
<style>
body {
    margin:0px;
    background-image: url(http://i.imgur.com/LhxKJpU.jpg);
    }
.top, .left, .right, .bottom {
    display: block;
    position:absolute;
    width:100%;
    height:100%;
    }   
.top {
    border-top: 1em double #fff; top: 40px; z-index:100;
    }
.left {
    border-left: 1em double #fff; left: 40px; z-index:200;
    }
.right {
    border-right: 1em double #fff; right: 40px; z-index:300;
    }
.bottom {
    border-bottom: 1em double #fff; bottom: 40px; z-index:400;
    }           
</style>
</head>
<body>
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</body>
</html>

y aquí está mi resultado

ingrese la descripción de la imagen aquí

por cierto, no tiene tilevalor repetir un fondo. tienes que elegir entre repeat-x repeat-y no-repeatyrepeat

que yo sepa, no puede editar el HTML en las plantillas prefabricadas de Squarespace (puede hacerlo en sus propias plantillas). Podría hacer lo mismo con los pseudoelementos si no tiene acceso al HTML.
En realidad... probablemente deberías hacerlo con pseudo-elementos de todos modos, a menos que esos divya existan y signifiquen algo.
@CAI Squarespace en realidad te da bastante control. Solo una vez descubrí brevemente si Squarespace era bueno, por lo que no puedo recordar los detalles exactos, pero creo que debe habilitar la Plataforma de desarrollador y luego puede editar html y css. Me gustó la forma en que las plantillas de Squarespace eran bastante limpias.
@Joonas Nunca lo he usado, así que no lo sé, pero por lo que leí, parecía que solo puedes usar la plataforma de desarrollo para crear tus propios temas y no con sus temas prefabricados. Yo podría, sin embargo, estar equivocado.
Mi punto sigue siendo que no debe agregar marcas html innecesarias de todos modos :)
@CAI Tal como lo recuerdo, de manera predeterminada, le brinda el tema activo para editar, cuando lo habilita. Primer párrafo después del encabezado: 1. Choose a Starting Pointparece estar diciendo lo mismo .
Tienes razón, esto es lo que leí "no permite cambios en el marcado HTML de nuestros bloques..." parece que solo se aplica a ciertos bloques, aunque no a todo el marcado
Gracias @hsawires por responder a mi pregunta. cuando pongo esto en el css personalizado dice 'error de sintaxis en la línea 1' - entiendo que esto es un html pero no estoy seguro de dónde colocar el código? es decir, cómo 'reestructurar mi cuerpo html'?
@LaurenBasser ¿Qué software está usando para editar html y le da ese error? ... Lo que quise decir con la reestructuración de su html es agregar 4 DIV como contenedor principal en lugar del cuerpo.
@hsawires ¡funcionó! Me di cuenta de que estaba colocando el código en css como un novato. No quería habilitar la plataforma de desarrollador ya que esto (según tengo entendido) significaría que necesitaría codificar todo el sitio, sin embargo, descubrí que necesitaba colocar el código en la inyección de código en configuración > avanzada. ¡Muchas gracias por toda su ayuda!
Cómo crear un borde de patrón alrededor de la página web, espacio cuadrado
RespuestasAquíPolítica de privacidad1y, 0v